ajax上传文件之ajaxfileupload使用详解

废话不多说，直接展示关键代码片段
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,      //一般设置为falsefileElementId : file,    //文件上传空间的id属性  <input type="file" id="file" name="file" />dataType : 'json',       //返回值类型 一般设置为jsonsuccess : 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方法就可以解决

 //自添加方法handleErrorhandleError: function( s, xhr, status, e )      {// If a local callback was specified, fire itif ( s.error ) {s.error.call( s.context || s, xhr, status, e );}// Fire the global callbackif ( 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

ajax上传文件之ajaxfileupload使用详解相关推荐

java的sftp文件传输_java使用SFTP上传文件到资源服务器方法详解
java使用SFTP上传文件到资源服务器本文实例为大家分享了java实现SFTP上传文件到资源服务器工具类,供大家参考,具体内容如下首先得创建连接sftp服务器的公共类MySftp.java: p ...
SMW0上传文件到数据库层详解
1.T-CO DE: SMW0 2.选择Binary data for WebRFC applications 3.然后F8 4.输入Package 按F8进入. 5.首先你要维护文件类型.选择Set ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
flask ajax 上传图片,flask jQuery ajax 上传文件
1.html 代码注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
页面无刷新ajax上传文件--模拟iframe，超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
ajax上传文件获取失败,Ajax上传文件/照片时报错TypeError ：Illegal invocation的解决方法...
本篇文章给大家带来的内容是关于Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 问题 A ...
php 通过ajax上传文件,php – 通过ajax上传文件
我使用2个文件index.js,upload.php尝试通过ajax上传文件(img),如果成功附加到div uploadfile_show. 但它不起作用,几乎没有问题,下面是我的代码有什么建议吗? ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
php+ajax上传文件
直接上源代码 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > ...

ajax上传文件之ajaxfileupload使用详解

ajax上传文件之ajaxfileupload使用详解相关推荐

最新文章

热门文章