ajax上传文件之ajaxfileupload使用详解

最新推荐文章于 2022-11-22 10:45:38 发布

WallerKP

最新推荐文章于 2022-11-22 10:45:38 发布

阅读量4.7k

点赞数

分类专栏： javascript 文章标签： ajax html 图片上传 ajaxfileupload-js插件

本文链接：https://blog.youkuaiyun.com/kunpeng1987/article/details/78633378

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用ajaxfileupload.js插件进行文件上传，包括HTML、JS和PHP的关键代码。在使用过程中可能遇到的问题及解决方法：1) Chrome浏览器关于jQuery版本的错误，可以通过添加handleError方法解决；2) IE浏览器中文本选择框值丢失，原因是IE安全设置导致。解决方法是提交后重新复制元素以保留值。文章还提供了修改后的ajaxfileupload.js下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接展示关键代码片段
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.youkuaiyun.com/download/kunpeng1987/10132744