jQuery ajaxFileUpload文件上传之前端

来源：互联网发布：php用户在线留言编辑：程序博客网时间：2024/06/07 15:41

1、html部分：

<li class="dis-flex">            <label>上传</label>            <div class="flex dis-flex"><input type="file" name="file1" id="file1"  onchange="ajaxFileUpload('file1','imgSrc','uploadurl')" style="display: none" accept=".png,.jpg,.png,.jpeg"/><button class="round5 btn1" onclick="$('input[id=file1]').click(); ">浏览</button><div class="upload-img"><input id="imgSrc" name="imgSrc" type="hidden" /><div class="upload-img"><div id="div_uploadurl" style="float: left; display: none"><a id="uploadurl_href" target='_blank'  href=''><img id="uploadurl" class="img1" src=""></img></a></div></div></div>            </li>

2、js部分：

/* 文件上传 */ function ajaxFileUpload(fileObj,hidden,uploadurl) {var file = $("#file1").val();$.ajaxFileUpload({url : "${pageContext.request.contextPath}/upload/uploadSlideImage", //处理上传用的后台程序,可以是PHP,也可以是ASP等type : "post",dataType : "json",async : false,//同步secureuri : false, //是否需要安全协议，一般设置为falsefileElementId : fileObj, //文件上传域的IDsuccess : function(result, status) {//alert("上传成功");loadingHelper.removeLoading()if (result.status == "1") {var data = result.data;    $("#div_"+uploadurl).attr("style","display:block; float:left;");$("#"+hidden).val(data.imgSrc);$("#"+uploadurl).attr("src",data.imgSrc);$("#"+uploadurl+"_href").attr("href",data.imgSrc);alert("上传成功");} else if (json.status == "0") {Ewin.alert(json1.errMsg);}},error : function(data, status, e)//服务器响应失败处理函数{Ewin.alert(e);}});return false;}

3、问题：

（1）作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />，会报 ajaxFileUpload 报这错jQuery.handleError is not a function。

（2）Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这个是google浏览器报的错误，非常经典，不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'HTML'。

0 0