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 ...
随机推荐
- SQL 练习10
查询没有学全所有课程的同学的信息 分析 先查询出所有课程的数量 select count(cid) from course 再查询出成绩表中课程数量=总课数的人员 select sid from sc ...
- kubebuilder实战之一：准备工作kubebuilder实战之一：准备工作
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- NOIP 模拟 $33\; \rm Hunter$
题解 \(by\;zj\varphi\) 结论题. 对于 \(1\) 猎人,他死的期望就是有多少个死在它前面. 那么对于一个猎人,它死在 \(1\) 前的概率就是 \(\frac{w_i}{w_i+w ...
- Git在IDEA中的日常使用
1.Git介绍Git对于做开发的小伙伴并不陌生,Git是现在比较流行的版本控制工具.Git的仓库分为本地仓库和远程仓库,当代码开发完成后,先提交(commit)到本地仓库,再推送(push)到远程仓库 ...
- spring cloud 的hystrix 熔断器 和feign 调用的使用
1, 添加依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId&g ...
- GPRS RTU设备OPC Server接口C# 实现
通过本OPC Server程序接口可为用户提供以OPC标准接口访问远程GPRS/3G/以太网 RTU设备实时数据的方式.从而方便实现GPRS/3G/以太网 RTU设备与组态软件或DCS系统的对接.本程 ...
- WPF : ControlTemplate和DataTemplate的区别
ControlTemplate用于描述控件本身. 使用TemplateBinding来绑定控件自身的属性, 比如{TemplateBinding Background}DataTemplate用于描述 ...
- 阿里云sql监控配置-druid
今天我们说说数据源和数据库连接池,熟悉java开发的同仁应该都了解C3PO,在这里不做过多的赘述了,今天我们说的是阿里DRUID,druid是后起之秀,因为它的优秀很快占领了使用市场,下边我们一起来看 ...
- rEFI引导Win10+Ubuntu14双系统
公司买了一台Alienware 15 R2,安装双系统折腾死我了,现在记录一下安装过程. 硬盘: 256固态+1T机械 安装顺序: 先Windows,再Ubuntu 不同BIOS启动方式下安装系统 U ...
- Spring 事务回滚机制详解
1:事务原理 1.2:aop/动态代理 类路径:org/springframework/aop/framework/CglibAopProxy.java ReflectiveMethodInvocat ...