不啰嗦,直接看代码
1.html:
<div class="con-item fix"> <span class="f">文章封面<sup style="color: red"> *</sup></span> <div class="f con-item-img"> <form method="post" enctype="multipart/form-data" id="Form_1" action=""> <div class="upload-img"> <i ng-show="!infoModel.cover" class="ti-plus"></i> <img ng-if="infoModel.cover" ng-src="{{infoModel.cover}}"/> <input type="file" class="btn-file" id="input_1" name="file"/> </div> </form> </div> </div>
2.js封装ajaxForm:(用flag判断是因为当页面中有多个上传按钮时,让每一个form只初始化一次,如果不做判断chenge事件和submit事件会绑定多次,结果就会提交多次)
var upLoadImage = { inputIdArr : [], formIdArr : [], start : function(formId, inputId, showRequest, callback){ var options = { url : api.API_UP_LOAD_FILE, beforeSubmit: showRequest, //提交前处理 success : callback, resetForm: true, dataType: 'json' }; var flag = true; for(var i = 0; i < this.inputIdArr.length; i++) { if(this.inputIdArr[i] == inputId) { flag = false; break; } } if(flag) //相同的ID只綁定一次事件 { $("#" + inputId).change(function(){ $("#" + formId).submit(); }); this.inputIdArr.push(inputId); } var formFlag = true; for(var j = 0; j < this.formIdArr.length; j++) { if(this.formIdArr[j] == formId) { formFlag = false; break; } } if(formFlag) { $("#" + formId).ajaxForm(function(){}); $("#" + formId).submit(function(){ $(this).ajaxSubmit(options); return false; }); this.formIdArr.push(formId); } }, }
3.调用方法
upLoadFile: function(){ upLoadImage.start("Form_1", "input_1", function(formData) { //表单提交前被调用的回调函数 var file = formData[0].value.type; //formData是表单文件的一个数组 if (!//(?:jpg|png|bmp|pdf|mp4|MOV)/i.test(file)){ //这里可以限定上传文件格式 alert("格式不正确!"); $("#input_1").val(""); //如果不成功就清空文件域,tip:在IE中安全设置的原因不允许清空文件域 return false; //如果“beforeSubmit”回调函数返回false,那么表单将不被提交 } }, function(responseText, statusText) { //表单提交成功后调用的回调函数 if(statusText == "success") { UpLoadCtrl.upLoadModel.pdfURL = responseText.data.url; UpLoadCtrl.scope.$apply(); } } ) }
4.注:项目使用了angular js和themify字体