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 ...
随机推荐
- noip33
T1 第一个猎人死的轮数等于在1号猎人之前死的猎人数+1,如果当前这个人没死,那么他死在一号猎人之前的概率为 \(\frac{w_{i}}{w_{1}+w_{i}}\),因为每死一个就会造成1的贡献, ...
- NOIP 模拟 $23\; \rm 赛$
题解 将所有物品分成四类,分别为两人共同喜欢的,只有一人喜欢的,没人喜欢的. 首先,先从两人共同喜欢的物品里找出 \(k\) 个,这时,就要从剩余的找出 \(\rm m-k\) 个,而且是最小的. 用 ...
- 【硬件模块】UWB介绍
From: https://liudongdong1.github.io/ UWB超宽带定位技术属于无线定位技术的一种.无线定位技术是指用来判定移动用户位置的测量方法和计算方法,即定位算法.目前最常用 ...
- windows和liunx下换行符问题
区别 windows换行符是: \r\n liunx换行符是: \n 问题 程序处理的时候就会有问题,因为在Windows的文件多了一个\r 解决办法(转换文件格式) vim file :set fi ...
- Monitor 类
命名空间:System.Threading 程序集: mscorlib.dll, System.Threading.dll 尝试获取指定对象的排他锁. 用于 Monitor 锁定对象 (即引用类型) ...
- RestTemplate post请求 Controller 接收不到值的解决方案 postForObject方法源码解析
springboot 整合 RestTemplate 与 使用方法 RestTemplate 的 postForObject 方法有四个参数 String url => 顾名思义 这个参数是请求 ...
- 深入Pulsar Consumer的使用方式&源码分析
原文链接 1.使用前准备 引入依赖: <dependency> <groupId>org.apache.pulsar</groupId> <artifactI ...
- Android开发，缺少权限导致无法修改原文件，获取所有文件访问权限的方法
在Android 11开发中,app会遇到使用绝对路径无法打开某文件的情况(文件存在根目录下,获取到的路径为:/storage/emulated/0/XXX.txt),而使用相对路径打开文件后(获取到 ...
- Go版本依赖--伪版本
目录 1.简介 2. 什么是伪版本 3. 伪版本风格 4. 如何获取伪版本 1.简介 在go.mod中通常使用语义化版本来标记依赖,比如v1.2.3.v0.1.5等.因为go.mod文件通常是go命令 ...
- JSP（Java Server Pages）内置对象
request对象 (1)访问请求参数 处理HTTP请求中的各项参数.在这些参数中,最常用的就是获取访问请求参数.当通过超链接的形式发送请求时,可以为该请求传递参数,这可以通过在超链接的后面加上问好& ...