ajaxForm上传文件到本地服务器(封装)
不啰嗦,直接看代码
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字体
ajaxForm上传文件到本地服务器(封装)的更多相关文章
- C# 上传文件至远程服务器
C# 上传文件至远程服务器(适用于桌面程序及web程序) 2009-12-30 19:21:28| 分类: C#|举报|字号 订阅 最近几天在玩桌面程序,在这里跟大家共享下如何将本地文件上传 ...
- asp.net 服务器 上传文件到 FTP服务器
private string ftpServerIP = "服务器ip";//服务器ip private string ftpUserID = "ftp的用户名" ...
- 在C#客户端用HTTP上传文件到Java服务器
在C#客户端用HTTP上传文件到Java服务器 来源:http://www.cnblogs.com/AndyDai/p/5135294.html 最近在做C / S 开发,需要在C#客户端上传文件到 ...
- .Net 上传文件到ftp服务器和下载文件
突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...
- java 上传文件到 ftp 服务器
1. java 上传文件到 ftp 服务器 package com.taotao.common.utils; import java.io.File; import java.io.FileInpu ...
- SpringBoot上传文件到本服务器 目录与jar包同级问题
目录 前言 原因 实现 不要忘记 最后的封装 Follow up 前言 看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传 ...
- IE下AjaxForm上传文件直接提示下载的兼容性Bug
使用AjaxForm上传文件时候,在IE下直接提示下载保存: 我的示例代码: return this.Json( new { prop1 = 5, prop2 = 10 }); 这种问题只出现在IE下 ...
- ASP.NET上传文件到远程服务器(HttpWebRequest)
/// <summary> /// 文件上传至远程服务器 /// </summary> /// <param name="url">远程服务地址 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
随机推荐
- 五、Web框架基础(2)
Tornado 异步协程编程.(其实是异步IO而非真正的异步,从内核拷贝到用户空间的过程还是同步的) 适合用户量大.高并发,如抢票.网页游戏.在线聊天等场景:或大量HTTP持久连接,通过单TCP持久连 ...
- ASP.NET MVC EXTJS 通用主菜单框架
一.说明 首先我不知道定义的文章标题是不是准确,我这篇博文介绍的是一个通用的软件主菜单框架,界面布局用的是extjs,还是先上一个图吧. 软件主界面左侧菜单采用的风格是extjs的手风琴模式,需要注意 ...
- 九度OJ 1102:最小面积子矩阵 (DP、缓存、剪枝)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1666 解决:504 题目描述: 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵(矩阵中元素个数为矩阵面积) 输入: ...
- 拜托,面试请不要再问我TCC分布式事务的实现原理!(转)
一.写在前面 之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了不少文章,还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以咱们这篇文章,就 ...
- HttpClient访问网络
HttpClient项目时Apache提供用于访问网络的类,对访问网络的方法进行了封装.在HttpURlConnection类中的输入输出操作,统一封装成HttpGet.HttpPost.HttpRe ...
- ubuntu 12.04 解压安装jdk
ubuntu下解压安装jdk,简单方便.分享一下安装方法: 注:该方法针对新系统,之前没有配置过jdk的情况. 1.下载相应版本号的jdk压缩包.如 jdk-8u5-linux-x64.gz 2.解压 ...
- pdf文件的作成
Dim Report As New crProgressList Report.PrintOptions.PaperSize = CrystalDecisions.Shared.PaperSize.P ...
- (C)struct结构体指针
结构体指针 指针结构与指针的关系亦有两重:其一是在定义结构时,将指针作为结构中的一个成员:其二是指向结构的指针(称为结构指针). 前者同一般的结构成员一样可直接进行访问,后者是本节讨论的重点. 结构指 ...
- poj2586 Y2K Accounting Bug —— 枚举
链接:http://poj.org/problem?id=2586 题意:大意是一个公司在12个月中,或固定盈余s,或固定亏损d.但记不得哪些月盈余,哪些月亏损,只能记得连续5个月的代数和总是亏损(和 ...
- javase练习题--每天写写
package com.javaTestDemo; import java.util.Scanner; public class JavaTest1 { public static void main ...