jQuery ajaxFileUpload文件上传之前端

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'。



你可能感兴趣的:(jQuery ajaxFileUpload文件上传之前端)