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

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

最后不得不自己动手写一个图片上传插件，可以兼容各大浏览器！（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>";
?>

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

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

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意