基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
效果图
前端代码，基于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="/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>
后端代码，nodejs+express
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"});
}
});
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
jQuery Ajax 上传文件处理方式介绍(推荐)
AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J
-
jQuery插件ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
-
jquery ajax实现文件上传功能实例代码
下面看下ajax实现文件上传 没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></
-
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载. 效果图如下: 实现代码如下: JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $("#filelist").niceScroll({ cursor
-
jQuery progressbar通过Ajax请求实现后台进度实时功能
本文主要演示Jquery progressbar的进度条功能.js通过ajax请求向后台实时获取当前的进度值.后台将进度值存储在cookie中,每次请求后,将进度条的值增2个.以此演示进度条的实时显示功能. 前台index.jsp jsp代码如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = reques
-
基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam
-
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能.分享给大家供大家参考,具体如下: jquery上传文件用的formdata,上传进度条需要添加xhr的onprogress html代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
-
基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia
-
jQuery实现简单的文件上传进度条效果
本文实例讲述了jQuery实现文件上传进度条效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href=&quo
-
PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足
-
jQuery+ajax简单实现文件上传的方法
本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr
-
HTML5 Ajax文件上传进度条如何显示
原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制. <constant name="struts.multipart.maxSize" value="52428800"/>这个配置
-
js HTML5 Ajax实现文件上传进度条功能
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +
-
jQuery实现文件上传进度条特效
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太
-
PHP利用APC模块实现文件上传进度条的方法
本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在
-
PHP+apc+ajax实现的ajax_upload上传进度条代码
本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码.分享给大家供大家参考,具体如下: 上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览,选择上传后,会产生一个临时文件,上传的时把这个临时文件,上传到服务器,上传完成后,这个临时文件会被删除掉.如果我们能读取这个临时文件的大小,就知道上传进度是多少了,php apc模块可以实现这个功能. 一.安装apc模块 下载地址:http://pecl.php.net/package/apc tar zxvf APC-3.1
-
servlet+jquery实现文件上传进度条示例代码
现在文件的上传,特别是大文件上传,都需要进度条,让客户知道上传进度. 本文简单记录下如何弄进度条,以及一些上传信息,比如文件的大小,上传速度,预计剩余时间等一些相关信息.代码是匆忙下简单写的,一些验证没做,或代码存在一些隐患,不严谨的地方.本文代码只供参考. 进度条的样式多种多样,有些网站弄得非常绚烂漂亮.本文UI端不太懂,只会一些简单的基本的css而已,所以进度条弄得不好看.本文侧重的给读者提供一个参考,一个实现思路而已. 注:由于jQuery版本用的是2.1.1,所以如果跑本例子源码,请用I