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 ...
随机推荐
- contos7 安装weblogic10.3 _wls1036_generic.jar
环境:CentOS7+jdk1.8 weblogic下载地址1: http://www.oracle.com/technetwork/cn/middleware/weblogic/downloads/ ...
- Arduino连接L298n驱动板驱动小车的电机
1.L298N介绍 先来讲讲电机驱动,驱动一般使用L298N,L298N 是一种双H桥电机驱动芯片,其中每个H桥可以提供2A的电流,功率部分的供电电压范围是2.5-48v,逻辑部分5v供电,接受5vT ...
- spring框架学习日志一
一.简介 1.对spring框架的简单理解 可以理解为它是一个管理对象的创建.依赖.销毁的容器 Spring 是一个开源框架. Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单 ...
- mfc HackerTools拖动文件
VOID DragAcceptFiles( HWND hWnd, BOOL fAccept); 这个函数的调用,表示你要让某个窗体能够接受文件的拖入.第一个参数指定是哪个窗口, ...
- 深入浅出Mybatis系列（十）---延迟加载
一.延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 延迟加载:先 ...
- LeetCoded第206题题解--反转链表
反转一个单链表. 示例 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 方法一:递归 自始至 ...
- 在PyQt中构建 Python 菜单栏、菜单和工具栏
摘要:菜单.工具栏和状态栏是大多数GUI 应用程序的常见且重要的图形组件.您可以使用它们为您的用户提供一种快速访问应用程序选项和功能的方法. 本文分享自华为云社区<Python 和 PyQt:创 ...
- 理解ASP.NET Core - [02] Middleware
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 中间件 先借用微软官方文档的一张图: 可以看到,中间件实际上是一种配置在HTTP请求管道中,用 ...
- Tensorflow之TFRecord的原理和使用心得
本文首发于微信公众号「对白的算法屋」 大家好,我是对白. 目前,越来越多的互联网公司内部都有自己的一套框架去训练模型,而模型训练时需要的数据则都保存在分布式文件系统(HDFS)上.Hive作为构建在H ...
- JVM详解（一）——概述
Test https://www.cnblogs.com/yrxing/p/14651346.html#gc的基础知识 https://www.cnblogs.com/yinzhengjie/p/92 ...