我想通过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. php部署调优

    转自Laravel学院,  作者:学院君 最近刚好看到一些php.ini优化问题处理. 很多文章都是把配置全部翻译. (内容翻译太多和流程结构写的不是很清晰,看起来也头大.但是建议全部内容看几遍了解一 ...

  2. HTML To Word

    一.源码特点       1.在一些实际的应用场景中,有用户需要将一批规范的资料网页保存为WORD文档以便离线传阅或用于其它需求.在此之前,使用了OFFICE组件来尝试完成此功能需求,但是效果都不尽如 ...

  3. c#枚举类型操作方法总结-1

    关于枚举类型用法总结两点,分享如下: 1.  根据枚举值获取枚举值的描述信息,可以封装一个方法供调用: //  enumValue是传入的枚举值 public string GetEnumDescrp ...

  4. linux设置开机启动程序?

    /etc/rc.d/init.d 是 /etc/init.d的目标链接. 如果/etc/rc.d下面没有 rc.local脚本文件, 则需要 手动创建: 而 /etc/bashrc 是在登陆bash ...

  5. leetcode 62. 不同路径(C++)

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 问总共有多 ...

  6. shell 操作字符串 变量 数组

    #!/bin/bash name="jack" #使用双引号拼接 #greeting="hello,"$name"!" #greeting_ ...

  7. 002-es5.4.3结合spring-data-elasticsearch3.0.0.0使用

    一.使用前设置 1.elasticsearch开启 cmd下,进入安装目录 cd D:\developToool\elasticsearch-5.4.3 elasticsearch # 或者后台运行 ...

  8. python笔记01(详情请看廖雪峰的官方网站)

    python 在调用函数的时候, 如果传入的参数数量不对, 如果传入的参数类型不对 会报TypeError的错误,并且Python会明确提示参数错误原因. hex()内置函数会把一个整数转换成十六进制 ...

  9. Mac012--FinalShell SSH工具

    Mac--FinalShell SSH工具 FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,Mac OS X,Linux FinalShell,国货产品,同类产品有 ...

  10. 20190920 On Java8 第二十章 泛型

    第二十章 泛型 多态的泛化机制: 将方法的参数类型设为基类: 方法以接口而不是类作为参数: 使用泛型: 泛型实现了参数化类型 简单泛型 Java 泛型的核心概念:你只需告诉编译器要使用什么类型,剩下的 ...