我想通过jQuery异步上传文件,这是我的HTML:

1
2
3
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

这是我的javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
  $("#uploadbutton").click(function () {
    var filename = $("#file").val();
 
    $.ajax({
      type: "POST",
      url: "addFile.do",
      enctype: 'multipart/form-data',
      data: {
        file: filename
      },
      success: function () {
        alert("Data Uploaded: ");
      }
    });
  });
});

我只得到上传的文件名,咋办?

我现在用了 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 Form插件来解决这个问题:http://malsup.com/jquery/form/#code-samples 有没有不用该插件来实现呢? 解决方法: 可以采用HTML5,用j ...

  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. paper about spring

    一.解析用户原始信息的json文件 #!/usr/bin/python # -*- coding=utf-8 -*- import os import sys import json def main ...

  2. JS判断Android、iOS或浏览器的多种方法(四种方法)

    第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> ...

  3. SIEM中心日志节点WEF搭建说明

    https://www.freebuf.com/articles/es/197812.html

  4. loc() iloc() at() iat()函数

    1 四个函数都是用于dataframe的定位 []用于直接定位. loc()函数是用真实索引,iloc()函数是用索引序号. loc()函数切片是左闭右闭,iloc()函数切片是左闭右开. at(), ...

  5. 将字符串映射为Delphi控件名,批量修改控件属性

    http://blog.sina.com.cn/s/blog_4dfbd07c01000a81.html 将字符串映射为Delphi控件名,批量修改控件属性 (2007-10-08 14:50:51) ...

  6. Python 爬取淘宝商品数据挖掘分析实战

    Python 爬取淘宝商品数据挖掘分析实战 项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 爬取淘宝商品 ...

  7. 类String

    1字符串声明和创建 boolean contains(String str) 判断大字符串中是否包含小字符串 boolean endsWith(String str) 判断字符串是否以某个指定的字符串 ...

  8. lua 转换16进制字符串为10进制数值

    lua 转换16进制字符串为10进制数值 > print(tonumber()) 利用tonumber函数,“16”表示“03FFACB”为16进制数.

  9. 抓取某高校附近共享单车位置,并使用web方式展示过去几天的位置变化

    效果如图 使用了高德地图API:https://lbs.amap.com/api/javascript-api/example/marker/massmarks js代码如下: function Ma ...

  10. ubuntu彩色图形界面

    Ubuntu的默认 ~/.bashrc 文件里,有一个控制是否打开彩色提示符文件的变量 $force_color_promt,只需要打开这个变量的开关,就可以使用彩色的命令行提示符了. 这对于输查看命 ...