不啰嗦,直接看代码

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上传文件到本地服务器(封装)的更多相关文章

  1. C# 上传文件至远程服务器

    C# 上传文件至远程服务器(适用于桌面程序及web程序) 2009-12-30 19:21:28|  分类: C#|举报|字号 订阅     最近几天在玩桌面程序,在这里跟大家共享下如何将本地文件上传 ...

  2. asp.net 服务器 上传文件到 FTP服务器

    private string ftpServerIP = "服务器ip";//服务器ip private string ftpUserID = "ftp的用户名" ...

  3. 在C#客户端用HTTP上传文件到Java服务器

    在C#客户端用HTTP上传文件到Java服务器  来源:http://www.cnblogs.com/AndyDai/p/5135294.html 最近在做C / S 开发,需要在C#客户端上传文件到 ...

  4. .Net 上传文件到ftp服务器和下载文件

    突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...

  5. java 上传文件到 ftp 服务器

    1.  java 上传文件到 ftp 服务器 package com.taotao.common.utils; import java.io.File; import java.io.FileInpu ...

  6. SpringBoot上传文件到本服务器 目录与jar包同级问题

    目录 前言 原因 实现 不要忘记 最后的封装 Follow up   前言 看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传 ...

  7. IE下AjaxForm上传文件直接提示下载的兼容性Bug

    使用AjaxForm上传文件时候,在IE下直接提示下载保存: 我的示例代码: return this.Json( new { prop1 = 5, prop2 = 10 }); 这种问题只出现在IE下 ...

  8. ASP.NET上传文件到远程服务器(HttpWebRequest)

    /// <summary> /// 文件上传至远程服务器 /// </summary> /// <param name="url">远程服务地址 ...

  9. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

随机推荐

  1. HTML5即将迎来黄金时代 轻应用再成行业焦点

    2015-01-23 11:03:09     来源:快鲤鱼 大众能看到的H5效果拜“微信”所赐,几乎每天都有H5页面的推广以及H5小游戏在微信上传播.其实,H5的大热与百度不无关系,2012年开始, ...

  2. linux中vi编辑器(转载)

    三种模式相互切换 在命令终端输入vi进入vi编辑器. 命令模式:进入编辑器即进入命令模式, 输入模式:在命令模式下输入“i ”进入输入模式: 末行模式:按“:”进入末行模式: 在输入模式切换至末行模式 ...

  3. Aspose.cells 读取Excel表中的图片问题

    一.说明 本文主要是讲解,怎么使用aspose.cells读取Excel表中的图片,并把图片转换成流或是image对象. 二.开发环境说明 开发工具vs2012,c#语言, 三.Aspose.cell ...

  4. mysql分页查询-limit

    分页查询的sql: select * from table limit 4,10; 4表示查询的索引,索引是从0开始,4表示从第五条数据开始查询,10表示要查询多少条数据,10表示查询十条数据 如果从 ...

  5. POJ2406 Power Strings —— KMP or 后缀数组 最小循环节

    题目链接:https://vjudge.net/problem/POJ-2406 Power Strings Time Limit: 3000MS   Memory Limit: 65536K Tot ...

  6. CAS无锁机制原理

    原子类 java.util.concurrent.atomic包:原子类的小工具包,支持在单个变量上解除锁的线程安全编程 原子变量类相当于一种泛化的 volatile 变量,能够支持原子的和有条件的读 ...

  7. 从数据的角度带你深入了解IPFS

    IPFS 和区块链有着非常紧密的联系, 随着区块链的不断发展,对数据的存储需求也越来越高.本文从IPFS 的底层设计出发, 结合源代码, 分析了IPFS 的一些技术细节. 一.概述 IPFS 和区块链 ...

  8. 页面渲染——页面合成(composition)的优化

    合成(composition)意味着将网页中已经绘画好的部分结合在一起,且展示在屏幕上. 坚持使用transform和opacity属性来操作你的动画animation 在有动画的元素上使用 will ...

  9. C++软件工程师,你该会什么?

    请尊重原创: 转载注明来源   原创在这里哦 C语言广泛用于基础软件.桌面系统.网络通信.音频视频.游戏娱乐等诸多领域.是世界上使用最广泛的编程语言之一.随着物联网技术的发展,C/C++技术在3G网络 ...

  10. kallsyms

    kallsyms 在v2.6.0的内核中,为了更好地调试内核,引入新的功能kallsyms.kallsyms把内核用到的所有函数地址和名称连接进内核文件,当内核启动后,同时加载到内存中.