Jquery异步上传文件
我想通过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异步上传文件的更多相关文章
- 【转】jQuery异步上传文件
用了 jQuery Form插件来解决这个问题:http://malsup.com/jquery/form/#code-samples 有没有不用该插件来实现呢? 解决方法: 可以采用HTML5,用j ...
- jquery异步上传文件,支持IE8
http://code.taobao.org/p/upload2/src/ 已经托管至淘宝code 源码:http://code.taobao.org/p/upload2/src/jquery.upl ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
随机推荐
- php部署调优
转自Laravel学院, 作者:学院君 最近刚好看到一些php.ini优化问题处理. 很多文章都是把配置全部翻译. (内容翻译太多和流程结构写的不是很清晰,看起来也头大.但是建议全部内容看几遍了解一 ...
- HTML To Word
一.源码特点 1.在一些实际的应用场景中,有用户需要将一批规范的资料网页保存为WORD文档以便离线传阅或用于其它需求.在此之前,使用了OFFICE组件来尝试完成此功能需求,但是效果都不尽如 ...
- c#枚举类型操作方法总结-1
关于枚举类型用法总结两点,分享如下: 1. 根据枚举值获取枚举值的描述信息,可以封装一个方法供调用: // enumValue是传入的枚举值 public string GetEnumDescrp ...
- linux设置开机启动程序?
/etc/rc.d/init.d 是 /etc/init.d的目标链接. 如果/etc/rc.d下面没有 rc.local脚本文件, 则需要 手动创建: 而 /etc/bashrc 是在登陆bash ...
- leetcode 62. 不同路径(C++)
一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 问总共有多 ...
- shell 操作字符串 变量 数组
#!/bin/bash name="jack" #使用双引号拼接 #greeting="hello,"$name"!" #greeting_ ...
- 002-es5.4.3结合spring-data-elasticsearch3.0.0.0使用
一.使用前设置 1.elasticsearch开启 cmd下,进入安装目录 cd D:\developToool\elasticsearch-5.4.3 elasticsearch # 或者后台运行 ...
- python笔记01(详情请看廖雪峰的官方网站)
python 在调用函数的时候, 如果传入的参数数量不对, 如果传入的参数类型不对 会报TypeError的错误,并且Python会明确提示参数错误原因. hex()内置函数会把一个整数转换成十六进制 ...
- Mac012--FinalShell SSH工具
Mac--FinalShell SSH工具 FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,Mac OS X,Linux FinalShell,国货产品,同类产品有 ...
- 20190920 On Java8 第二十章 泛型
第二十章 泛型 多态的泛化机制: 将方法的参数类型设为基类: 方法以接口而不是类作为参数: 使用泛型: 泛型实现了参数化类型 简单泛型 Java 泛型的核心概念:你只需告诉编译器要使用什么类型,剩下的 ...