用了 jQuery Form插件来解决这个问题:http://malsup.com/jquery/form/#code-samples

有没有不用该插件来实现呢?

解决方法:

可以采用HTML5,用jQuery,Ajax实现文件上传,不仅如此,你可以做文件验证(名称,大小,MIME类型)或利用HTML5的进度标签(或者div)处理进度事件。

最近我也在做文件上传,我不想用flash、iframe或其它插件,经过一番研究,我想出了解决方案。

HTML:

1
2
3
4
5
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>

首先,你可以做一些验证,例如文件的onChange事件:

1
2
3
4
5
6
7
$(':file').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});

按钮点击触发Ajax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php'//server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax事件
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form数据
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });
});

处理进度:

1
2
3
4
5
function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

HTML5的文件上传非常简单,但必须在支持HTML5的浏览器中运行。

【转】jQuery异步上传文件的更多相关文章

  1. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

  2. jquery异步上传文件,支持IE8

    http://code.taobao.org/p/upload2/src/ 已经托管至淘宝code 源码:http://code.taobao.org/p/upload2/src/jquery.upl ...

  3. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  4. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  5. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  6. MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  7. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

  8. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  9. MVC文件上传01-使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

随机推荐

  1. java—数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = input数组中,除了input[i] 之外的所有数的乘积,不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}

    /** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...

  2. postgresql流复制配置

    一.配置环境: 示例环境 主机名 IP 角色 系统版本 数据目录 pg版本 db1 192.168.128.128 主库 RedHat5.3 /app/postgreSQL/data 9.1.7 db ...

  3. maven、strutst版本号

    struts.2.3.15.3 :大版本号 struts1-->struts2 :分支版本号 增加新功能 :小版本号 修复bug beta:公测版release:发行版(已可以使用)Genera ...

  4. Eclipse建立Maven项目后无法建立src/main/java资源文件夹

    在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace default jre就可以了.

  5. HTML中一些基本的标签用法

    姓名输入框:<input type="text" value="默认有值"/> 密码输入框:<input type="text&qu ...

  6. HDU 5688:2016"百度之星" - 资格赛 Problem D

    原文链接:https://www.dreamwings.cn/hdu5688/2650.html Problem D Time Limit: 2000/1000 MS (Java/Others)    ...

  7. js中cookie的使用

    js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...

  8. EventBus使用详解(一)——初步使用EventBus

    一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...

  9. CSS3的chapter5

    变形样式——transform: translate()                              ——指定对象的2D translation(2d平移) transform-orig ...

  10. WINDOWS Composer & PHPUnit 安装记录

    Windows: 安装Composer: 下载了composer_setup.exe 运行之后提示和Xdebug冲突,在php.ini中注释掉php_xdebug.dll,再次运行.通过 compos ...