1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

基于jQuery图片上传预览插件,无刷新多图片在线上传(完美兼容版)

小川 前端
查看演示  

基于jQuery图片上传预览插件(完美兼容版),效果图:

11.png

6.png

最近在做一个图片上传,找了很多插件兼容都不是很好!

最后不得不自己动手写一个图片上传插件,可以兼容各大浏览器!(IE、火狐、谷歌、360等等)


大插件大多都是需要swf文件支持,那么就意味着浏览器都装好adobe flash player。我们公司的电脑浏览器如果没装adobe flash player,也没提示要装(最后片上传就不能用)。那么导致只能放弃这类插件。


本插件由小川纯手编写,在这里分享给大家(由于是在工作中根据一个需求编写的插件,有很多不足之处)


【第一步】:   头部引入JS文件和jquery库文件

<script src="http://www.youhutong.com/static/js/jquery.js"></script> 

<script src="youhutong.uplode.js"></script>


【第二步】:  JS引用插件图片上传方法

<script>
$(function(){
	$("#demo").youhutongUplode(
		{
			formId:'myform',      //表单ID
			previewId:'preview',  //图片预览容器ID
			filename:'filename',  //file文件域的name值
			height:'100px',       //图片高
			width:'auto'          //图片宽
		}
		,
		{
			key1:'val1',          //传入服务器的值1:key+value
			key2:'val2',          //传入服务器的值1:key+value
			key3:'val3'           //传入服务器的值1:key+value
		}
	);
	$("#demo1").youhutongUplode(
		{
			formId:'myform',
			previewId:'preview1',
			filename:'filename1',
			height:'100px',
			width:'auto'
		}
	);
})
</script>

【第三步】:  PHP处理页面返回JSON格式数据,并调用回调方法!

调整方法如:

echo "<script>window.parent.youhutongSuccess('".json_encode($name)."');</script>";

1、上传成功需要返回2个参数:图片地址和图片名称。

2、上传失败需要返回1个参数:失败提示字符。

msg: 提示字符。

src: 图片地址(用于显示预览刚才上传的图片的)。

srcname:图片名称(后续提交表单用于入库的)。


【图片上传插件参数说明】:

$("上传按钮ID").youhutongUplode(参数对象1,参数对象2)

参数对象1:

可传参数列表(+默认值):有3个值是必须的(formId、previewId、filename)

formId    :  '',/*表单ID*/

previewId  :  '',/*图片容器*/

filename   :  '',/*文件域name值*/


name      :  'www.youhutong.com',

width     :  '300px',/*图片宽*/

height    :  '300px',/*图片高*/

target    :  true,/*默认认为原form表单是不使用target的*/

size      :  2,/*默认最大上传2MB*/

checkfile   :  true,/*是否检查图片格式,文件大小*/

type      :  ["gif", "jpeg", "jpg", "bmp", "png"]/*默认图片类型*/

参数对象2:

这个是传给服务器的数据,也是和参数对象1一样的设置方式。key和value都是自己定义。


【插件注意事项】:

1、引用插件图片上传方法传入的参数中:图片预览容器ID,不能是单标签

2、在PHP处理图片上传时:

    1):记得接收file文件时,file文件域的name值通过$_POST或$_GET接收(看你表单本身的提交方式是那一种)如:

$file = $_FILES [$_POST['filekey']];

这里的filekey不要写成别的了哦,当然如果你一个表单只引用一次插件,那也可以直接写成:

$file = $_FILES ['filename'];      // filename就是你传入的file文件域的name值

    2):返回数据时调用方法:youhutongSuccess(json数据),当然你也可以自己定义一个,然后自己处理上传成功后的HTML操作。

下面是一个案例源码(一个表单有两个图片需要上传):

HTML部分:

<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script src="youhutong.uplode.js"></script>
<script>
$(function(){
	$("#demo").youhutongUplode(
		{
			formId:'myform',      //表单ID
			previewId:'preview',  //图片预览容器ID
			filename:'filename',  //file文件野的name值
			height:'100px',       //图片高
			width:'auto'          //图片宽
		}
		,
		{
			key1:'val1',          //传入服务器的值1:key+value
			key2:'val2',          //传入服务器的值1:key+value
			key3:'val3'           //传入服务器的值1:key+value
		}
	);
	$("#demo1").youhutongUplode(
		{
			formId:'myform',
			previewId:'preview1',
			filename:'filename1',
			height:'100px',
			width:'auto'
		}
	);
})
</script>
<form action="a.php" enctype="multipart/form-data" method="post" id="myform">
	<div id="main">
		<div style="margin-top:50px;">
			<div id="preview" style="float:left;"></div>
			<div style="float:left; margin-left:5px;">
				<div class="btn" id="demo"></div>
				<span style="display:block; font-size:12px; color:green; overflow:hidden;">
				要求:45像素 x 45像素</span>
			</div>
		</div>
		<br/><br/>
		<div style="margin-top:50px; clear:both;">
			<div id="preview1" style="float:left;"></div>
			<div style="float:left; margin-left:5px;">
				<div class="btn" id="demo1"></div>
				<span style="display:block; font-size:12px; color:green; overflow:hidden;">
				要求:45像素 x 45像素</span>
			</div>
		</div>		
	</div>	
</form>

PHP部分:

<?php
header("Content-Type:text/html;charset=utf-8");
//第一:文件临时存放路径
$tmp_file = $_FILES [$_POST['filekey']] ['tmp_name']; 
//第二:以时间来命名上传的文件
$file_types = explode ( ".", $_FILES [$_POST['filekey']] ['name'] );
$file_type = $file_types [count ( $file_types ) - 1];
$name['filekey'] =$_POST['filekey']; 
if(!($file_type=='jpg' || $file_type=='png' || $file_type=='gif')){
    $name['msg'] = "上传失败,图片格式不对";
}else{
	$file_name = "GZ_TY_" . date ( 'Ymdhis' ). rand(6) . "." . $file_type;
	//第三:上传到的地方
	$savePath ="uplode/";              
	//第四:执行上传
	$size = $_FILES[$_POST['filekey']]['size'];
	if($size>(1024*1024)){
		$name['msg'] = '上传失败,文件过大';
	}else{
		if(copy ( $tmp_file, $savePath . $file_name )){
			$name['msg'] = "上传成功";
			$name['src'] = $savePath . $file_name;
			$name['srcname'] = $savePath . $file_name;
		}else{
			$name['msg'] = "上传失败";
		}
	}
}
unset($_FILES);
echo "<script>window.parent.youhutongSuccess('".json_encode($name)."');</script>";
?>


如果您在用这款图片上传插件有什么问题,可以留言,我们会进一步改进、解决。


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/100.html

( 1 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情