jquery进度条上传文件
Ⅰ jquery Uploadify上传文件
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
Ⅱ jquery upload怎么上传文件
拖放支持：
可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。
上传进度条：
显示一个进度条显示为单独的文件和所有上传组合上传进度。
可取消上传：
单个文件上传可以取消来停止上传进度。
可恢复上传：
中止的上传可以与浏览器支持的Blob API进行恢复。
分块上传：
大文件可以上传较小的块与浏览器支持的Blob的API 。
客户端图像大小调整：
图像可以自动调整大小的客户端与浏览器支持所需的JS API的。
预览图像，音频和视频：
图像，音频和视频文件的预览可以与浏览器支持所需的API上传前显示。
Ⅲ 使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网
Ⅳ jquery file upload怎么使用
使用方法：
1. 需要加载的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代码：
?
1
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
3. js代码：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});
3.1 显示上传进度条：
?
123456789
$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});
3.2 需要一个<div>容器用来显示进：
?
123
<div id="progress"><div class="bar" style="width: 0%;"></div></div>
4. API
4.1 Initialization：
在上传按钮上调用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：请求发送的目标url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",
默认"POST"
Type: string
Example: 'PUT'
3. dataType:希望从服务器返回的数据类型，默认"json"
Type: string
Example: 'json'
4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。
Type: boolean
Default: true
5. acceptFileTypes：允许上传的的文件类型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上传文件大小
Example: 999000 (999KB) //单位：B
7. minFileSize:最小上传文件大小
Example: 100000 (100KB) //单位：B
8.previewMaxWidth : 图片预览区域最大宽度
Example: 100 //单位：px
4.3 Callback Options:
使用方法一：函数属性
实例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：绑定事件监听函数
实例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每个事件名称都添加前缀：”fileupload”;
注意推荐使用第二种方法。
常用的回调函数：
1. add: 当文件被添加到上传组件时被触发
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发
3. progressall: 全局上传处理事件的回调函数
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。
5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。
6. always : 上传请求结束时（成功，错误或者中止）都会被触发。
Ⅳ 用jquery如何实现提交表单点击提交之后显示正在上传中，之后显示上传成功的效果
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
Ⅵ Ajax文件上传进度条如何实现（jquery版本
前端要做的就是设置一个定时器通过接口去后台获取当前上传进度是多少，然后渲染出进度条就行。当进度达到100%时清除定时器。
Ⅶ jquery 多个 上传文件教程
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
</script>
js函数：
<scripttype="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框
'script':'Handler1.ashx',//script：后台处理程序的相对路径
'cancelImg':'image/cancel.png',
'buttenText':'请选择文件',//浏览按钮的文本，默认值：BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder':'Uploader',//上传文件存放的目录
'queueID':'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
'queueSizeLimit':120,//上传文件个数限制
'progressData':'speed',//上传速度显示
'auto':false,//是否自动上传
'multi':true,//是否多文件上传
//'onSelect':function(e,queueId,fileObj){
//alert("唯一标识:"+queueId+" "+
//"文件名："+fileObj.name+" "+
//"文件大小："+fileObj.size+" "+
//"创建时间："+fileObj.creationDate+" "+
//"最后修改时间："+fileObj.modificationDate+" "+
//"文件类型："+fileObj.type);
//}
'onQueueComplete':function(queueData){
alert("文件上传成功！");
return;
}
});
});
页面中的控件代码：
<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>
函数主要参数：
$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多讲了
'script':'/AjaxByJQuery/file.do',//处理Action
'cancelImg':'cancel.png',
'folder':'',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls;*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器详解见文档
'onComplete':function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData);
}
});
});后台一般处理文件：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要说明
///</summary>
publicclassHandler1:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问
stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径
if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//创建服务端文件夹
}
file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上传成功");
}
else
{
context.Response.Write("0");
}
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。