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, //是否需要安全协议,一般设置为false fileElementId : fileObj, //文件上传域的ID success : 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'。