FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template
$.ajax({
url: url,
type: 'POST',
data: new FormData(form),
dataType: 'json',
cache: false,
processData: false,
contentType: false,
}).done(function(data) {
myalert.success("视频文件上传成功", true); // 提示信息不消失
console.log(data);
return false;
}).fail(function(jqXHR, textStatus, errorThrown) {
});
关键的3个选项：
cache: false,
processData: false,
contentType: false,
* demo:
<html> <head>
<meta charset="UTF-8">
<title>上传校长寄语视频</title>
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<style> #wrapper {
width: 500px;
} .form-control {
margin-bottom: 20px;
} .btn-primary {
margin-left: 70px;
width: 170px;
} iframe {
width: 0;
height: 0;
border: 0;
} .invisible {
display: none;
} #alert {
position: fixed;
top: 20px;
right: 20px;
z-index: 2;
} #wrapper ul {
margin: 20px 0;
}
li {
list-style: none;
}
.ui-widget-header {
border: 1px solid #ACD978;
background: #A1D16B;
}
#progressbar {
border: none;
}
</style>
</head> <body>
<div class="container" id="wrapper">
<form method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="schoolName">学校名称:</label>
<input class="form-control" id="schoolName" type="text" name="schoolName" />
</div>
<div class="form-group">
<label for="file">选择文件:</label>
<input id="file" class="form-control" type="file" name="file" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">上传</button>
</div>
</form>
<div id="progressbar"></div>
<ul>
<li id="fileName"></li>
<li id="fileSize"></li>
<li id="fileType"></li>
<li id="progressNumber"></li>
</ul>
</div>
<iframe id="J_iframe" name="demoIframe" class="invisible"></iframe>
<!-- TODO: 播放预览 -->
<video class="invisible" width="320" height="240" src="http://47.92.133.100:8089/dd.mp4" controls="controls"></video>
<script type="text/javascript" src="../assets/ckeditor/js/require.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script>
var form = document.forms[0];
form.action = window.CONTEXT_PATH + "/school/uploadMasterVideo";
// form.target = "demoIframe"; require(['jquery', 'alert', 'jquery-ui'], function($, m) {
$("#file").on("change", function() {
var file = this;
var fileSize = 0;
if (file.size > 1024 * 1024) {
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
} else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
var index = file.value.lastIndexOf("/")
if (index < 0) {
index = file.value.lastIndexOf("\\");
}
var filename = file.value.substring(index + 1);
document.getElementById('fileName').innerHTML = '文件名: ' + filename;
document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
document.getElementById('fileType').innerHTML = '文件类型: ' + file.type;
console.log(file.size);
}); var myalert = m.alert.getInstance();
var $progressbar = $("#progressbar").show(); form.onsubmit = function(e) {
e.preventDefault();
var url = this.action,
fd = new FormData(form);
/*
$.ajax({
url: url,
type: 'POST',
data: new FormData(form),
dataType: 'json',
cache: false,
processData: false,
contentType: false,
}).done(function(data) {
myalert.success("视频文件上传成功", true); // 提示信息不消失
console.log(data);
return false;
}).fail(function(jqXHR, textStatus, errorThrown) { });
*/
// 进度百分比
var p = document.getElementById('progressNumber'); var xhr = new XMLHttpRequest();
if (!xhr) {
document.write("<h1>当前浏览器不支持上传文件</h1>");
return false;
} xhr.upload.addEventListener("progress", function(evt) {
var text, s = "进度: ",
percentComplete; if (evt.lengthComputable) {
percentComplete = Math.round(evt.loaded * 100 / evt.total);
s += percentComplete.toString() + '%'; $progressbar.progressbar("value", percentComplete);
} else {
s += '无法计算';
}
text = document.createTextNode(s);
p.innerHTML = "";
p.append(text); if (percentComplete === 100) {
myalert.info("视频处理中...");
}
}, false);
xhr.addEventListener("load", function(evt) {
/* 当服务器响应后，这个事件就会被触发 */
var txt = evt.target.responseText;
console.log(txt);
var resp = JSON.parse(txt);
if (resp.status === 200) {
myalert.success("视频文件上传成功", true);
} else {
myalert.fail(resp.msg, resp.error);
}
}, false);
xhr.addEventListener("error", function() {
myalert.fail("上传文件发生了错误尝试");
}, false);
xhr.addEventListener("abort", function() {
myalert.fail("上传被用户取消或者浏览器断开连接");
}, false); xhr.open("POST", url);
xhr.send(fd); myalert.info("视频文件上传中...");
};
}); require(['jquery', 'jquery-cookie'], function($) {
$("#schoolName").val($.cookie("schoolName")); // iframe上传文件 cross domain x
$("#J_iframe").on("load", function() {
var s = this.contentDocument.body.textContent;
var resp = JSON.parse(s) || {};
console.log(resp);
});
}); require(['jquery', 'jquery-ui'], function($) {
css("../assets/jqui/jquery-ui.css"); var schoolNames = []; $.ajax({
type: 'GET',
url: window.CONTEXT_PATH + '/system/school/archive',
}).done(function(data) {
// for autocomplete, school name list
data.entity.forEach(function(ent) {
schoolNames.push(ent.name);
});
}); $("#progressbar").progressbar({
value: 0
}); $("#schoolName").autocomplete({
source: schoolNames,
autoFocus: true
});
});
</script>
</body> </html>
alert.js
(function() {
var m = function(timeout) {
this.timeout = timeout ? timeout : 3000;
var a = document.createElement("div");
a.id = "alert";
a.className = "alert alert-danger";
a.innerHTML = "An error occurred during submitting...";
a.style.display = 'none';
document.body.append(a);
this.$alert = a;
};
m.getInstance = function() {
if (!this.$alert) {
this.$alert = new m();
}
return this.$alert;
};
m.prototype.success = function(msg, b) {
var self = this;
self.$alert.className = "alert alert-success";
self.$alert.innerHTML = msg;
self.$alert.style.display = 'inline-block';
if (typeof b !== "undefined" && b) {
} else {
setTimeout(function() {
self.$alert.style.display = "none";
}, self.timeout);
}
};
m.prototype.fail = function(msg) {
var self = this;
self.$alert.className = "alert alert-danger";
self.$alert.innerHTML = msg;
self.$alert.style.display = 'inline-block';
setTimeout(function() {
self.$alert.style.display = "none";
}, self.timeout);
};
m.prototype.info = function(msg) {
var self = this;
self.$alert.className = "alert alert-info";
self.$alert.innerHTML = msg;
self.$alert.style.display = 'inline-block';
};
define({ alert: m });
})();
config.js
// require.js 依赖的js库路径配置
require.config({
paths : {
// "jquery-1.12" : "../assets/jqui/external/jquery/jquery",
"jquery-ui": "../assets/jqui/jquery-ui",
// "jquery": "../assets/bootstrap/js/jquery-3.3.1.min",
"jquery": "../assets/ckeditor/js/jquery-3.2.1",
"ckeditor-core": "../assets/ckeditor/ckeditor",
'ckeditor-jquery': "../assets/ckeditor/adapters/jquery",
"jquery-cookie": "../assets/js/jquery.cookie",
"bootstrap": "../assets/bootstrap/js/bootstrap",
"alert": "js/lib/alert",
"supersized": "../assets/js/login/supersized.3.2.7",
"url-param": "js/util/getUrlParam",
'image-preview': 'js/util/preview'
},
shim: {
'ckeditor-jquery':{
deps:['jquery','ckeditor-core']
},
'jquery-cookie': {
deps: ['jquery']
},
'bootstrap': {
deps: ['jquery']
},
'jquery-ui':{
deps: ['jquery']
}
}
}); // 后台ajax url前缀
var CONTEXT_PATH = "http://192.168.10.137:9999";
// var CONTEXT_PATH = "http://zhanghum:9999";
FormData上传文件 带进度条的更多相关文章
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- java进行文件上传，带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
- 【Web】前端文件上传，带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
- servlet多文件上传（带进度条）
需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...
- web文件上传，带进度条
原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- jQuery上传文件显示进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
随机推荐
- Redis分布式锁的原理和实现
前言 我们之前聊过redis的,对基础不了解的可以移步查看一下: 几分钟搞定redis存储session共享--设计实现:https://www.cnblogs.com/xiongze520/p/10 ...
- SpringBoot Spring Security 核心组件 认证流程 用户权限信息获取详细讲解
前言 Spring Security 是一个安全框架, 可以简单地认为 Spring Security 是放在用户和 Spring 应用之间的一个安全屏障, 每一个 web 请求都先要经过 Sprin ...
- 3 分钟了解 JSON Schema
大家好,我不是鱼皮. 幸运又不幸,我是一名程序员,他也是一名程序员. 周末,我在开发网站,他在开发游戏,两个人一起写代码,一起写 Bug 头秃,竟也有了一丝别样的浪漫,好不自在! 今天,他遇到了一个后 ...
- js 遍历数组对象求和
这个通常是求多个商品的总价遇到的情形: [ 0: {id: 1, name: "服务费", price: "1.00"} 1: {id: 2, name: &q ...
- layui关闭弹出框
layer.close(index) - 关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var ...
- 映射Map、队列Queue、优先级队列PriorityQueue
映射Map 将对象映射到其他对象的能力是解决编程问题的有效方法.例如,考虑一个程序,它被用来检查 Java 的 Random 类的随机性.理想情况下, Random 会产生完美的数字分布,但为了测试这 ...
- 如何让BootStrap栅格之间留出空白间隙呢？
BootStrap栅格之间留出空隙 BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin外边距来使 ...
- 发布日志 - kratos v2.0.5 版本发布
V2.0.5 Release Release v2.0.5 · go-kratos/kratos (github.com) 修复问题 proto errors when swagger api imp ...
- sublime text 的 Ctrl + P「模糊搜索算法」
Reverse Engineering Sublime Text's Fuzzy Match 这是我能 google 到的最早的一篇关于 Sublime Text 的模糊搜索的文章. https:// ...
- （四）羽夏看C语言——循环与跳转
写在前面 由于此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇 ...