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,以 ...
 
随机推荐
- 软考考点---CPU
			
软考考点---CPU 中央处理器(CPU,Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心( Control Un ...
 - mysql_num_rows
			
mysql记录总条数 $sql3 = "select * from inviter where tuijianren = '$session' "; $res3 = mysql_q ...
 - 更改UISearchBar button属性
			
//点击搜索框时触发 - (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar { self.theSearchUserSearchBa ...
 - 九度OJ 1135:字符串排序 (排序)
			
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1559 解决:807 题目描述: 先输入你要输入的字符串的个数.然后换行输入该组字符串.每个字符串以回车结束,每个字符串少于一百个字符. 如 ...
 - java之插入排序
			
//插入排序(Insertion Sorting)的基本思想是:把n个待排序的元素看成为一个有序表和一个无序表,开始有序表只包含一个元素,无序表中包含有n-1个元素,排序过程中每次从无序表中取出第一个 ...
 - Git简介和安装
			
一.什么是Git? Git是一个分布式版本控制系统,客户端并不只提取最新版本的文件快照,而是把代码仓库完整地镜像下来.如图所示: 任何一处的服务器或者个人机发生故障,都可以用其它机器的任何一个镜像出来 ...
 - 网页兼容性测试(工具使用IETESTER、Firefox、360安全浏览器)
			
网页兼容性测试主要是针对不同的浏览器进行的测试.由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题.对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常显示 ...
 - zoj  2313 Chinese Girls' Amusement  解题报告
			
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1313 题目意思:有 N 个人(编号依次为1~N)围成一个圆圈,要求求 ...
 - codeforces   A. Punctuation   解题报告
			
题目链接:http://codeforces.com/problemset/problem/147/A 题目意思:给定一篇文章,需要对这篇文章进行编辑,使得:(1)两个单词之间有一个空格分开 (2) ...
 - UUID 和 GUID 的区别(转)
			
UUID是一个由4个连字号(-)将32个字节长的字符串分隔后生成的字符串,总共36个字节长.比如:550e8400-e29b-41d4-a716-446655440000 http://gohands ...