1、html部分:
<li class="dis-flex">
<label>上传</label>
<div class="flex dis-flex">
<input type="file" name="file1" id="file1" οnchange="ajaxFileUpload('file1','imgSrc','uploadurl')" style="display: none" accept=".png,.jpg,.png,.jpeg"/>
<button class="round5 btn1" οnclick="$('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'。