不啰嗦,直接看代码

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. BUAAOO P13-P14 UML Interaction

  2. 多媒体开发之---h.264 SPS PPS解析源代码,C实现一以及nal分析器

    http://blog.csdn.net/mantis_1984/article/details/9465909 http://blog.csdn.net/arau_sh/article/detail ...

  3. ZeroClipboard—ZeroClipboard的使用

    1.ZeroClipboard的作用: 借助Zero Clipboard能够简单高速地将内容拷贝到剪贴板,相似点击某些网页中"复制"按钮后复制对应区域的内容. 2.ZeroClip ...

  4. mvc 发送QQ邮件

    试图部分代码: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

  5. ios 常见错误整理 持续更新

    本文转载至 http://blog.csdn.net/yesjava/article/details/8086185  1. mutating method sent to immutable obj ...

  6. 2018-11-13-常用模块1 (time random os sys)

    1.时间模块 time 2.随机数模块 random 3.与操作系统交互模块 os 4.系统模块 sys 在我们真正开始学习之前我们先解决下面几个问题,打好学习模块的小基础,以便更好的学习模块. (1 ...

  7. The threads in the thread pool will process the requests on the connections concurrently.

    https://docs.oracle.com/javase/tutorial/essential/concurrency/pools.html Most of the executor implem ...

  8. 【R】R语言生成随机数

    1.概述 作为一种语言进行统计分析,R有一个随机数生成各种统计分布功能的综合性图书馆.R语言可以针对不同的分布,生成该分布下的随机数.其中,有许多常用的个分布可以直接调用.本文简单介绍生成常用分布随机 ...

  9. spring+mybatis项目整合

    前辈总结的很详细,贴出链接,参考学习 http://www.open-open.com/lib/view/open1392252233301.html

  10. Android如何配置init.rc中的开机启动进程(service)【转】

    本文转载自:http://blog.csdn.net/qq_28899635/article/details/56289063 开篇:为什么写这篇文章 先说下我自己的情况,我是个普通的大四学生,之前在 ...