基于jquery ajax的多文件上传进度条过程解析

来源:脚本之家  责任编辑:小易  

要想用ajax进行异步上传的话,需要依靠插件

这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

可能和返回结果的字符串有关。由于指定返回结果的dataType:'json',如果结果不是一个合法的json字符串,就会提示undefined。 1、先注释dataType:'json',看看alert是不是得到的结果。 2、检查结果字符串,看格式是否正确,也许有不可见字符串。

效果图

前端代码,基于jquery

最简单的是画一个不可编辑的文本框,然后每隔一段时间添加 ||| 进去

<!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{ padding: 0; margin: 0; } table{ width: 600px; text-align: center; } </style> </head> <body> <input type="file" id="imgsend" name="file" value="发送图片" multiple="multiple" /> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <td>名称</td> <td>大小</td> <td>进度</td> <td>结果</td> </tr> </thead> <tbody> <!-- <tr> <td>xxx</td> <td>100</td> <td class="per">100%</td> <td class="result">成功</td> </tr>--> </tbody> </table> </body> <script type="text/javascript" src="http://img.zgxue.com/javascripts/jquery.js"> </script> <script type="text/javascript"> ;(function($){ $.fn.extend({ uploadFile:function(option){ var that = this; var defau = { type:"post", cache:false, url:"", data:{}, processData:false, contentType:false, success:function(){}, error:function(){}, progress:function(){}, sendBefore:function(){}, filter:[], //可以接受的文件后缀 upName:true //是否对文件名称转化大写比对 } option = $.extend(true, defau, option); var fileP = that.attr("name") || "file"; //传给后端得 file对应字段 console.log(fileP) var files = that[0].files; option.sendBefore(files); //发送之前 for(var i = 0,len = files.length; i < len; i++ ){ var fs = files[i]; var fnameArr = fs.name.split('.'); var fNmae = fnameArr.pop(); var str = ''; if(option.upName){ fNmae = fNmae.toUpperCase(); }else{ fNmae = fNmae.toLowerCase(); } if(option.filter.length > 0 && option.filter.indexOf(fNmae) !== -1){ option.error("文件后缀不符",i); continue; } fileUpload(files[i],i); } //开始文件上传 function fileUpload(file,index){ var fd = new FormData(); fd.append(fileP,file); //追加其他参数 for(var i in option.data){ fd.append(i,option.data[i]); } $.ajax({ url: option.url, type: option.type, data: fd, cache: option.cache, processData: option.processData, contentType: option.contentType, success:function(data){ option.success(data,index); }, error:function(error){ console.log(error); option.error(error,index); }, xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); function onprogress(evt){ var loaded = evt.loaded; //已经上传大小情况 var tot = evt.total; //附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 file.loaded = loaded; file.total = tot; file.percent = per + '%'; file.index = index; option.progress(file); } } return that; } }); })($,window); //发送图片 var $table = $("table tbody"); $("#imgsend").on('change',function(){ var that = this; $(that).uploadFile({ url:"/api/file", data:{}, filter:[], //后缀文件筛选 sendBefore:function(files){ //开始之前 console.log(files); var str = ''; for(var i = 0; i < files.length; i++){ var item = files[i]; str += '<tr>'+ '<td>'+ item.name +'</td>'+ '<td>'+ FormatSize (item.size) +'</td>'+ '<td class="per">0</td>'+ '<td class="result"></td>'+ '</tr>'; } $table.html(str); }, success:function(data,index){ //某个文件传完 var $tr = $table.find('tr').eq(index); $tr.find('.result').html("成功"); }, error:function(err,index){ //某个文件报错 $tr.find('.result').html("失败"); }, progress:function(file){ //某个文件的上传进度 // file.loaded 已经上传的 // flie.total 总量 // file.percent 百分比 // file.index 第多少个文件 var $tr = $table.find('tr').eq(file.index); $tr.find('.per').html(file.percent); console.log(file.name + ":第" + file.index + '个:' + file.percent); } }); }); //文件大小格式化 function FormatSize (fileSize) { var arrUnit = ["B", "K", "M", "G", "T", "P"], baseStep = 1024, unitCount = arrUnit.length, unitIndex = 0; while(fileSize >= baseStep && unitIndex < unitCount - 1){ unitIndex++; fileSize /= baseStep; } fileSize = fileSize.toFixed(2); return fileSize + " " + arrUnit[unitIndex]; } </script> </html>

建议把参数直接绑到URL后面提交,我之前也是收不到值,我后来就绑定到URL上提交了 ,得到值了,至于为什么,我也不知道

后端代码,nodejs+express

using System.Data.OleDb; using System.Data; namespace _211 { /// /// DBQuery 的摘要说明。 /// public sealed class DBQuery { static OleDbConnection conn=DBConnection.getConn(); static DataTable dt; public static DataTable OpenQu

const multiparty = require('multiparty'); var fs =require("fs"); router.post('/api/file', function(req, res, next) { //生成multiparty对象,并配置上传目标路径 const form = new multiparty.Form() // //设置编辑 form.encoding = 'utf-8' // //设置文件存储路径 form.uploadDir = "./public/static/files/" // //设置单文件大小限制 //form.maxFilesSize = 2 * 1024 * 1024 // form.maxFields = 1000; 设置所以文件的大小总和 // 上传完成后处理 form.parse(req, (err, fields, files) => { if (err) { console.log("parse:",err); res.json({"success":"error"}); } else { const inputFile = files.file[0]; const uploadedPath = inputFile.path const imgtype = inputFile.originalFilename; const inPath = `./public/static/files/${imgtype}`; //重命名的路径 // 判断是否存在./dist/static/files文件 fs.stat('./public/static/files', (err, stats) => { if (JSON.stringify(stats) === undefined) { fs.mkdirSync('./public/static', 0777) fs.mkdirSync('./public/static/files', 0777) } storeFiles(uploadedPath, fields, inPath) }); } }); function storeFiles(uploadedPath, fields, inPath) { //重命名为真实文件名 fs.rename(uploadedPath, inPath, (err) => { if (err) { console.log("rename:",err); res.json({"success":"error"}); } else { res.json({"success":"hahha"}); } }); } });

MIUI正在和微信合作,预计马上就要支持了。别的手机都可以?大兄弟,没有调查就没有发言权。华为手机去年还支持来着,后来就悄悄下架了该功能,所有手机都不支持了。OPPO,VIVO也不支持了吧。至于这么长的时间才搞定,小米员工是这样解释的。

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

jquery ajax多图上传显示怎么写

首先我们在页面上放置个上传按钮,使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。

<a class="btn" id="btn">上传图片</a> 最大500KB,支持jpg,gif,png格式。

<ul id="ul_pics" class="ul_pics clearfix"></ul>

接着,加载jQuery.js和plupload.full.min.js插件。

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="plupload/plupload.full.min.js"></script>

当点击按钮“上传图片”后,弹出选择文件对话框,按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法,开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度,最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台,会发现上传一张图片,会向后台ajax.php请求一次。

var uploader = new plupload.Uploader({ //创建实例的构造方法

runtimes: 'html5,flash,silverlight,html4',

//上传插件初始化选用那种方式的优先级顺序

browse_button: 'btn',

// 上传按钮

url: "ajax.php",

//远程上传地址

flash_swf_url: 'plupload/Moxie.swf',

//flash文件地址

silverlight_xap_url: 'plupload/Moxie.xap',

//silverlight文件地址

filters: {

max_file_size: '500kb',

//最大上传文件大小(格式100b, 10kb, 10mb, 1gb)

mime_types: [ //允许文件上传类型

{

title: "files",

extensions: "jpg,png,gif"

}]

},

multi_selection: true,

//true:ctrl多文件上传, false 单文件上传

init: {

FilesAdded: function(up, files) { //文件上传前

if ($("#ul_pics").children("li").length > 30) {

alert("您上传的图片太多了!");

uploader.destroy();

} else {

var li = '';

plupload.each(files,

function(file) { //遍历文件

li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";

});

$("#ul_pics").append(li);

uploader.start();

}

},

UploadProgress: function(up, file) { //上传中,显示进度条

$("#" + file.id).find('.bar').css({

"width": file.percent + "%"

}).find(".percent").text(file.percent + "%");

},

FileUploaded: function(up, file, info) { //文件上传成功的时候触发

var data = JSON.parse(info.response);

$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");

},

Error: function(up, err) { //上传出错的时候触发

alert(err.message);

}

}

});

uploader.init();

jquery ajax 读取多个文件

jQuery ajax读取json文件的示例:

json文件:

[

{"name":"哈哈··","email":"邮箱01","gender":"男","hobby":["上网","打球"]},

{"name":"呵呵··","email":"邮箱02","gender":"男","hobby":["网购","打球"]}

]

js代码:<script type="text/javascript" src="js/jquery.1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $.ajax({

//请求方式为get

type:"GET",

//json文件位置

url:"user.json",

//返回数据格式为json

dataType: "json",

//请求成功完成后要执行的方法

success: function(data){

//使用$.each方法遍历返回的数据date,插入到id为#result中

$.each(data,function(i,item){

var content=item.name+","+item.email+","+item.gender+

","+item.hobby[0]+","+item.hobby[1]+"</br>";

$("#result").append(content);

})

}

})

});

</script>

如何用Ajax实现多文件上传

jquery 实现多个上传文件教程:

首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):

1

2

3

4

5

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函数如下:

1

2

3

4

5

6

7

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>

<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>

<script src="js/swfobject.js" type="text/javascript"></script>

<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

</script>

js函数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<script type="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 + "\r\n" +

// "文件名:" + fileObj.name + "\r\n" +

// "文件大小:" + fileObj.size + "\r\n" +

// "创建时间:" + fileObj.creationDate + "\r\n" +

// "最后修改时间:" + fileObj.modificationDate + "\r\n" +

// "文件类型:" + fileObj.type);

// }

'onQueueComplete': function (queueData) {

alert("文件上传成功!");

return;

}

});

});

页面中的控件代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

<body>

<form id="form1" runat="server">

<div id="fileQueue">

</div>

<div>

<p>

<input type="file" name="uploadify" id="uploadify"/>

<input id="Button1" type="button" value="上传" onclick="javascript: $('#uploadify').uploadifyUpload()" />

<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />

</p>

</div>

</form>

</body>

函数主要参数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$(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);

}

});

});

后台一般处理文件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

using System;

using System.Collections.Generic;

using System.Linq;

using System.IO;

using System.Net;

using System.Web;

using System.Web.Services;

namespace fupload

{

/// <summary>

/// Handler1 的摘要说明

/// </summary>

public class Handler1 : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

HttpPostedFile file = context.Request.Files["Filedata"];//对客户端文件的访问

string uploadPath = 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");

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

以上方式基本可以实现多文件的上传,大文件大小是在控制在10M以下/。

怎么样通过jQuery Ajax实现上传文件

Query Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式

xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

// Handle response.

alert(xhr.responseText); // handle response.

}

};

fd.append('myFile', file);

// Initiate a multipart/form-data upload

xhr.send(fd);

其实jquery的ajax也可以支持到的,关键是设置:processData 和 contentType 。

ajax方式

var formData = new FormData();

var name = $("input").val();

formData.append("file",$("#upload")[0].files[0]);

formData.append("name",name);

$.ajax({

url : Url,

type : 'POST',

data : formData,

// 告诉jQuery不要去处理发送的数据

processData : false,

// 告诉jQuery不要去设置Content-Type请求头

contentType : false,

beforeSend:function(){

console.log("正在进行,请稍候");

},

success : function(responseStr) {

if(responseStr.status===0){

console.log("成功"+responseStr);

}else{

console.log("失败");

}

},

error : function(responseStr) {

console.log("error");

}

});

jQuery Ajax进度条效果

其实这种效果在实际应用中并不是太实用,如果你需要有一个进度的话,这必然前台与后台要实时交互才会出效果。比如你从数据库中遍历一组用户的信息,这中间需要一个不断递增的数字来实时调节页面的进度条。这就需要你不断的去请求服务器。当然也可以做个纯页面处理不通过服务器的,但执行时间你无法估计,造成不同步。

有一个简单的方法,首先得到这个需要读取数据的总条目数,然后在前台页面使用一个类似于递归的循环调用这个AJAX方法,再通过返回的数据来实时控制页面的进度条,通过返回成功的状态重复来调用此方法,最后用总条目数来控制这个递归什么时候停止。追问如何得到总条目数啊?追答先用服务器语言得到,比如PHP,可操作数据库得到。再使用smarty传递到前台的HTML页面中的SCRIPT中的某一个变量。

  • 本文相关:
  • jquery高级编程之js对象、json与ajax用法实例分析
  • php+jquery ajax实现的实时刷新显示数据功能示例
  • 使用jquery 的ajax 与 java servlet的交互代码实例
  • jquery实现form表单基于ajax无刷新提交方法实例代码
  • 通过隐藏iframe实现无刷新上传文件操作
  • sortable.js拖拽排序使用方法解析
  • ie浏览器打印的页眉页脚设置解决方法
  • javascript之queryselector和queryselectorall使用说明
  • 原生javascript+less实现瀑布流
  • javascript 节点操作 以及domdocument属性和方法
  • 微信小程序 腾讯地图sdk 获取当前地址实现解析
  • js回调函数简单易懂的入门实例分析
  • 关闭浏览器时提示onbeforeunload事件
  • 浅谈javascript math和number对象
  • jquery ajax多图上传显示怎么写
  • jquery ajax 读取多个文件
  • 如何用Ajax实现多文件上传
  • 怎么样通过jQuery Ajax实现上传文件
  • jQuery Ajax进度条效果
  • ajax jquery 中的 文件上传问题(jsp+java开发)
  • jqueryajax上传文件并获得其json返回结果,是怎么...
  • jquery ajax交互 进度条显示
  • jquery的ajaxFileUpload插件的多参数上传(data)...
  • Jquery ajax 怎样实现无刷新的文件上传
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved