用到jquery和layer.js

(function ($) {
$.fn.miniupload = function (options, callback) {
var jqDom = $(this);
var defaults = {
type: "POST",
url: "",
filetype: ["*"],
data: {}
};
var opts = $.extend(defaults, options);
var file_type_accept = opts.filetype.join([",."])
if ($.inArray("*", opts.filetype) == -1) {
file_type_accept = "." + file_type_accept;
jqDom.attr("accept", file_type_accept);
} jqDom.change(function () {
for (var i = 0; i < jqDom.prop("files").length; i++) {
var form_data = new FormData();
var file_data = jqDom.prop("files")[i];
if ($.inArray("*", opts.filetype) == -1) {
if (check_file_type(file_data["name"]) == -1) {
layer.alert("文件格式不正确");
break;
}
}
form_data.append("file_name", file_data);
for (var key in opts.data) {
form_data.append(key, opts.data[key]);
}
$.ajax({
url: opts.url,
cache: false,
contentType: false,
processData: false,
async: false,
type: "POST",
data: form_data,
success: function (data) {
callback(data);
jqDom.val(null);
}
});
}
});
function check_file_type(file) {
var extension = file.substr((file.lastIndexOf('.') + 1));
return $.inArray(extension, opts.filetype);
}
};
})(jQuery)
 一般file标签样式比较难设计,所以可以定义个file 把它隐藏,像下面这样用
<input type="file" style="display:none" id="upload" />
<input type="button" onclick="upload()" /> <script>
$(function(){
  $("#upload").miniupload({url:""},function(data){
  }); });

funtion upload(){
$("#upload").trigger("click");
}
</script>

JavaScript Ajax上传文件miniupload.js的更多相关文章

  1. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  2. 闲话ajax,例ajax轮询,ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  3. jS Ajax 上传文件报错"Uncaught TypeError: Illegal invocation"

    使用jquery ajax异步提交文件的时候报Uncaught TypeError :Illegal invocation错误,报错信息如图: 错误原因: jQuery Ajax 上传文件处理方式,使 ...

  4. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  5. 用iFrame模拟Ajax上传文件

    前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...

  6. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  7. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  8. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  9. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

随机推荐

  1. swift swift学习笔记--函数和闭包

    使用 func来声明一个函数.通过在名字之后在圆括号内添加一系列参数来调用这个方法.使用 ->来分隔形式参数名字类型和函数返回的类型 func greet(person: String, day ...

  2. hadoop程序MapReduce之MaxTemperature

    需求:求每年当中最高的温度 样本:temp.log 2016080623 2016072330 2015030420 输出结果:2016 30 2015 20 MapReduce分析设计: Mappe ...

  3. 什么叫做hack

    由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到 ...

  4. 《C++ Primer Plus》第14章 C++中的代码重用 学习笔记

    C++提供了集中重用代码的手段.第13章介绍的共有继承能够建立is-a关系,这样派生类可以重用基类的代码.私有继承和保护继承也使得能够重用基类的代码,单建立的是has-a关系.使用私有继承时,积累的公 ...

  5. u盘装系统,u盘安装win7系统教程

    http://www.upanboot.com/tool/anzhuang_win7.html 可以用本教程给笔记本.台式机.上网本和组装电脑通过U盘安装Win7系统. 步骤一.首先要准备一个至少8G ...

  6. setTimeout/setInterval伪异步

    setTimeout(function(){alert(1);}, 1000); 在使用setTimeout.setInterval的时候,会传一个时间来控制代码的执行时机.在经过了设置的时间段后,代 ...

  7. 使用log4net记录日志到数据库(含有自定义属性)

    记录日志是管理系统中对用户行为的一种监控与审核,asp.net中记录日志的方式有很多种,这里我只介绍一下最近用到的log4net,关于他的具体介绍网上有很多,我讲一下他的用法. 第一步:在配置文件中的 ...

  8. oracle如何四舍五入?

    转自:http://www.jb51.net/article/84924.htm 取整(向下取整): 复制代码代码如下: select floor(5.534) from dual;select tr ...

  9. linux的~和/的区别

    转自:https://zhidao.baidu.com/question/166486946.html /是目录层的分隔.表示符.只有一个/表明是root,/etc/表明是根目录下面的etc目录(当然 ...

  10. input输入框制定输入数据类型匹配

    <input type="text" id="price_169" value="97" style="max-width: ...