作用：1、图片ajax提交 2、即时显示

插件地址：https://blueimp.github.io/jQuery-File-Upload/
实例地址：

使用步骤：

1、页面引入特定的js（至少引入一下4个js）

<script src="?=1.03"></script> <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <!-- The basic File Upload plugin --> <script src="js/jquery.fileupload.js"></script>

2、布置form表单

<form action="b.php" method="post"> <!-- 图片上传按钮 --> <input id="fileupload" type="file" name="image" data-url="./a.php" multiple> <!-- 图片展示模块 --> <div class="files"> </div> <div style="clear:both;"></div> <!-- 图片上传进度条模块 --> <div class="up_progress"> <div class="progress-bar"></div> </div> <div style="clear:both;"></div> <br/> <button type="submit">Submit</button> </form>

3、js编写以及css样式控制

<script type="text/javascript"> //图片上传 $("#fileupload").fileupload({ dataType: 'json', add: function (e, data) { var numItems = $('.files .images_zone').length; if(numItems>=10){ alert('提交照片不能超过3张'); return false; } $('.up_progress .progress-bar').css('width','0px'); $('.up_progress').show(); $('.up_progress .progress-bar').html('Uploading...'); data.submit(); }, done: function (e, data) { $('.up_progress').hide(); $('.upl').remove(); var d = data.result; if(d.status==0){ alert("上传失败"); }else{ var imgshow = '<div class="images_zone"><input type="hidden" name="imgs[]" value="'+d.msg+'" /><span><img src="'+d.msg+'" /></span><a href="javascript:;">删除</a></div>'; jQuery('.files').append(imgshow); } }, progressall: function (e, data) { console.log(data); var progress = parseInt(data.loaded / data.total * 100, 10); $('.up_progress .progress-bar').css('width',progress + '%'); } }); //图片删除 $('.files').on({ mouseenter:function(){ $(this).find('a').show(); }, mouseleave:function(){ $(this).find('a').hide(); }, },'.images_zone'); $('.files').on('click','.images_zone a',function(){ $(this).parent().remove(); }); </script> <style type="text/css"> /* 图片展示样式 */ .images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; } .images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;} .images_zone span img{width:120px; vertical-align: middle;} .images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;} /* 进度条样式 */ .up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;} .up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;} </style>

4、程序端代码编写

<?php header('Content-type: application/json'); if($_FILES["image"]["error"]!=0){ $result = array('status'=>0,'msg'=>'上传错误'); echo json_encode($result);exit(); } if( !in_array($_FILES["image"]["type"], array('image/gif','image/jpeg','image/bmp')) ){ $result = array('status'=>0,'msg'=>'图片格式错误'); echo json_encode($result);exit(); } if($_FILES["image"]["size"] > 2000000){//判断是否大于2M $result = array('status'=>0,'msg'=>'图片大小超过限制'); echo json_encode($result);exit(); } $filename = substr(md5(time()),0,10).mt_rand(1,10000); $ext = pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION); $localName = "./imgs/".$filename.'.'.$ext; if ( move_uploaded_file($_FILES["image"]["tmp_name"], $localName) == true) { $lurl = 'http://api.gongchang.com/jQuery-File-Upload-master/'.$localName; $result = array('status'=>1,'msg'=>$lurl); }else{ $result = array('status'=>0,'msg'=>'error'); } echo json_encode($result); ?>

5、就此完成

注：事件监控需要使用jquery的on函数