ajaxForm上传文件到本地服务器(封装)
2023-09-11 14:15:07 时间
不啰嗦,直接看代码
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字体
相关文章
- ajax利用html5新特性带进度条上传文件
- 学习ASP.NET Core Blazor编程系列二十——文件上传(完)
- win10中mount和unmount iso文件
- lockingModel in log4net 日志文件不能被其他进程写入
- [转]SpringMVC单文件上传、多文件上传、文件列表显示、文件下载
- SpringBoot上传文件 MultipartFile.getBytes 导致内存溢出
- Linux批量修改文件夹755 文件644权限
- Unix lrzsz命令 上传本地文件到服务器 / 发送文件到客户端
- linux下批量转换文件
- MVC文件上传03-使用Request.Files上传多个文件
- 04把记事本文件中的代码编译成可执行文件
- 【转载】兼容php5,php7的cURL文件上传示例
- everything结果出现文件找不到
- el-upload 文件上传显示进度
- 文件上传和字段匹配
- read - 在文件描述符上执行读操作
- macOS SwiftUI小技巧之在没有xib文件的情况下初始化NSViewController的子类
- 文件上传概述
- bootstrap-fileinput文件上传组件和laravel引用(未完)
- 自定义MVC框架之工具类-文件上传类
- Linux上传文件时要注意的几点
- webAPI 上传文件 404错误(转载)
- iOS开发之网络编程--3、NSURLSessionDataTask实现文件下载(离线断点续传下载)
- 基于OkHttp 、Retrofit 、Volley 、RxJava、Novate多种网络框架整合的快速项目开发框架,一行代码实现Ftp文件上传、文件下载、文件删除和进度监听的工具类的使用
- PHP 文件上传