废话不多说，直接展示关键代码片段 HTML部分：
<div class="form-group"> <label class="col-sm-2 control-label">图片：</label> <input name="WxQRCode" type="file" onchange="fileUpload('WxQRCode');" id="WxQRCode"> <input type="hidden" name="wechat_code" id="wechat_code"/> </div>JS部分：
<script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> //上传 function fileUpload(file) { var url = "服务器端请求地址"; $.ajaxFileUpload( { url : url,//用于文件上传的服务器端请求地址 //secureuri : false, //一般设置为false fileElementId : file, //文件上传空间的id属性 <input type="file" id="file" name="file" /> dataType : 'json', //返回值类型 一般设置为json success : function(data, status) { if(data.error == 0){ if(file == 'WxQRCode'){ $('#wechat_code').val(data.url); $('#img-wechat').attr('src',data.url); }else{ $('#alipay_code').val(data.url); $('#img-alipay').attr('src',data.url); } } } }) } </script>PHP部分：
if ($_FILES['WxQRCode']) { $upload = $this->getupload("/user/{$filedate}/", '', 'WxQRCode');//上传类 if ($upload['file']) { $msg = json(array('error' => 0, 'url' => $upload['file'])); } elseif ($upload['errno']) { $msg = json(array('error' => 1, 'message' => $upload['errmsg'])); } }可能会遇到的问题： 1、Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError’，这个是chrome浏览器报的错误，这是jQuery版本的问题，jQuery版本1.4.2之前的版本才有handlerError方法，之后就不存在了，所以在ajaxfileupload.js最后加上handleError方法就可以解决
//自添加方法handleError handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }2、调用ajaxfileupload方法后文本选择框的值丢失，选择图片后，onchange事件调用ajaxfileupload方法然后在后台进行图片校验，但调用完后文本选择框的值就丢失了，如果我不调用ajaxfileupload的话，文本选择框就会显示图片的路径(IE有这个问题，但chrome是没问题的)，这是浏览器兼容性问题。 看了下ajaxfileupload的源码，它是自动生成一个新的表单，然后将所选的文件提交上去的，部分代码是这样
var oldElement = jQuery(files); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form);由于安全考虑，在IE下 ，jquery的clone并不能克隆input field的值，所以就导致克隆后新的input丢失了原来的值。解决办法： 找到jQuery(form).submit(); 在后面加上这四句，原理是提交后把元素再复制回来
var oldElement = jQuery('#jUploadFile' +id ,form); var newElement = jQuery('#'+s.fileElementId ); jQuery(newElement).replaceWith(oldElement); jQuery(oldElement).attr('id', s.fileElementId );最后附上修改好之后的ajaxfileupload.js http://download.csdn.net/download/kunpeng1987/10132744
