jquery fileupload plugin

demo :https://blueimp.github.io/jQuery-File-Upload/

github:https://github.com/blueimp/jQuery-File-Upload

api:https://github.com/blueimp/jQuery-File-Upload/wiki/API

最近总是遇到上传问题,一直使用的都是jquery-fileupload这款插件, 有详细的Api文档,具体用法就不做详细描述了。

只说填过的坑。

(1)自动 上传 与非自动,用户触发,

$(‘#fileupload‘).fileupload({
    add: function (e, data) {
     //绑定触发按钮事件
      $.("#okBtn").on("click",function(){
         data.submit();
      })
    }
});

(2)IE8,9图片预览问题

以前的博客里写过对这个的封装方法,大家可以翻一下瞅瞅;

(3)IE8 input框用户点击事件
            “input=file”,获取文件时,在IE8下无法通过某个按钮click事件间接触发input=file的change事件,

如果设计里这么要求了,可以用样式解决,将input透明 置于上层,放原按钮位置之上

(4)选择之后,事件取消 abort

var jqXHR = $(‘#fileupload‘).fileupload(‘send‘, {files: filesList})
    .error(function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === ‘abort‘) {
            alert(‘File Upload has been canceled‘);
        }
    });
$(‘button.cancel‘).click(function (e) {
    jqXHR.abort();
});

(5)多文件一次一条请求上传

<form >
    <input name="file1[]" type="file" multiple />
    <br />

    <input name="file2[]" type="file" multiple />
    <br />

    <input name="file3[]" type="file" multiple />
    <br />

    <button>send by fileupload send api</button>
</form>
$(document).ready(function(){
    var filesList = [],
        paramNames = [],
        elem = $("form");
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0]);
        paramNames.push(e.delegatedEvent.target.name);
    });

    $("button").click(function(e){
        e.preventDefault();
        file_upload.fileupload(‘send‘, {files:filesList, paramName: paramNames});
    })
})
时间: 2024-10-31 05:53:13

jquery fileupload plugin的相关文章

表单验证的validate.js插件---jQuery Validation Plugin

早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面,插件全名叫jquery.validate.js,在引入jquery.validate.js之前要先将jquery.js引入.这个插件主要用于表单的验证,用户在注册和登录时体验十分不错!由于自己只了解关于validate的皮毛,只会简单的应用rule规则和message自定义提示,事实上,validate还有其

新鲜出炉的jquery fileupload 插件

内容属原创,转载请注明出处 为什么做这个东东 项目中需要用到一个多附件上传的控件,找了一圈没找到中意的(唯一一个中意点的还不开源,费用比较高),这不,只得自己抡刀上了. 需求是什么 这么个上传的东东,要做哪些事情呢? 必须要干的事情: 1. 不能太丑,可以很素. 原生的input file实在和项目主体不太搭配,需要另外想办法. 2. 需要支持上传多个附件,比如后台有个字段叫做 影像资料,这个影像资料,也许就是一张正面照,也许,还有一堆的证件照,需要支持多个. 3. 需要一个页面上支持多个这样的

jQuery DataTables Plugin Meets C#

Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I wanted to scrap my custom table implementation for a table system that would use JSON to return data rather than have the data be statically allocated

30个非常流行的提示信息插件(jQuery Tooltip Plugin)

在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助. 每个插件都配有比较直观的截图,也就不做详细地介绍了,如果大家喜欢某一个插件,点击超链接,自己学习如何使用吧. 1. Dynamic tooltip 2. Popup Bubble 3. jQuery Horizontal Tooltip

django +jQuery Grid Plugin 实现表格前提自动分页, 排序

由于django 中文在前台显示乱码,本文使用了 先在用django模板生成表格,再用jQuery Grid对表格 进行处理. <link href="../pqgrid.min.css" rel="stylesheet"> <script type="text/javascript" src="../js/pqgrid.min.js"></script> <script type=&

如何写一个Jquery 的Plugin插件

博客分类: Javascript /Jquery / Bootstrap / Web jQuery配置管理脚本FirebugJavaScript JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外

jQuery Validation Plugin提示修改为气泡使用bootstrap

我使用的是 jQuery Validation Plugin - v1.11.1,消息提示修改为div,效果图: ,附上修改代码: 1.修改unhighlight方法: unhighlight : function (e, i, s) { "radio" === e.type ? this.findByName(e.name).removeClass(i).addClass(s) : t(e).removeClass(i).addClass(s); if ($("[for='

jQuery Media Plugin的使用

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF. 使用方法: 1.在web项目中引入jquery.media.js(下载); 2.HTML里a标签中添加class="media":例如: <a class="media" href=

jQuery Media Plugin

jQuery Media 简介 Jquery Media Plugin是一款页面内容嵌套多媒体的插件.支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等等. 播放器 文件格式 Quicktime aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,t