formdata 上传图片+进度条
记得引入jquery
//上传进度回调函数:
function progressHandlingFunction(e) {
if (e.lengthComputable) {
$('progress').attr({ value: e.loaded, max: e.total }); //更新数据到进度条
var percent = e.loaded / e.total * 100;
$('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
}
}
$("#upFilebtn").click(function () {
//判断文件类型
var file = $("#AjaxFileData")[0].files[0];
var imgType = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase();
if (imgType != ".jpg" && imgType != ".gif" && imgType != ".jpeg" && imgType != ".png") {
alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");
return false;
}
if (($("#AjaxFileData")[0].files[0].size / 1024) > (5 * 1024)) {
alert("上传图片不得大于 5M");
return;
}
var formData = new FormData();
formData.append("username", "formName");
formData.append("file", file);
$.ajax({
url: '喂喂改一下',
type: 'post',
data: formData,
xhr: function () { //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
processData: false,
contentType: false,
success: function (msg) {
alert('不谈了');
}
});
});
html:
<input id="AjaxFileData" type="file" >
<input type="button" id="upFilebtn" >
上传进度:<progress></progress><br/>
<p id="progress">0 bytes</p>
<p id="info"></p>
server:
string fileDir = HttpContext.Current.Server.MapPath("~/uploadfile/Do");
HttpPostedFile file = context.Request.Files["file"];
file.SaveAs(Path.Combine(fileDir, fileName));
好人甲 : https://www.cnblogs.com/tyqing/p/5995538.html
formdata 上传图片+进度条的更多相关文章
- 使用axios实现上传图片进度条
在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...
- 采用formdata做跨域的、无刷新、带进度条的文件上传
以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
- 上传图片 展示进度条 bootstrap
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bo ...
- 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...
- android一个上传图片的样例,包含怎样终止上传过程,假设在上传的时候更新进度条(一)
先上效果图: Layout为: <? xml version="1.0" encoding="utf-8"?> <LinearLayout x ...
- H5上传图片,并且显示进度条
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html上传图片(进度条变化)、音乐
<html> <head> <title>$Title$</title> </head> <link href="css/b ...
随机推荐
- JavaScript实现预览本地上传图片
<html> <head> <title> www.jb51.net图片上传预览 </title> <script> function Pr ...
- mysql-8.0.13在windows上的部署
1 .下载mysql-8.0.13-x64 官方网站:https://dev.mysql.com/downloads/mysql/ 2.解压到G盘 3.准备my.ini文件保存到解压目录 [mysql ...
- 001-JUnit之断言assert
一.简介以及pom JUnit4.4引入了Hamcrest框架,Hamcest提供了一套匹配符Matcher,这些匹配符更接近自然语言,可读性高,更加灵活: 使用全新的断言语法:assertThat, ...
- 2019-04-27 Python之有关文件的学习
一.文件 1.简介 二.文件的相关操作 1.打开文件 例如: f = open("F:\\text.txt", 'r') 只读模式,不可写入 2.读取文件 例如: f.readl ...
- Jvisualvm 添加插件
1.访问地址:https://visualvm.github.io/pluginscenters.html,找到自己JDK版本对应的插件下载地址(我的JDK版本为1.7.0_67): 2.点击该链接进 ...
- 让我怀疑人生的bug集合
bug1:一个人人都知道全局变量易污染,但是我就是污染不了的问题 解决:刚开始动用了session来存这个值,后来觉得太小题大做了,最后使用了闭包来解决,第一个function结束后开启第二个,起初没 ...
- 《linux就该这么学》第十七节课:第18,19,23章,mariadb数据库、PXE无人值守安装系统和openldap目录服务。
第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置: 1.yum install -y openldap openldap ...
- 利用反射和JDBC元数据实现更加通用的查询方法
package com.at221.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.*; i ...
- WebApi接口访问异常问题。尝试创建“testController”类型的控制器时出错。请确保控制器具有无参数公共构造函数
本来运行的好好的webAPI 接口突然报了个 :“尝试创建“testController”类型的控制器时出错.请确保控制器具有无参数公共构造函数” 错误.耗了半宿最终解决了, 原因: api控制器中引 ...
- 关于JDBC学习过程中的注意事项(分享自己犯过的错误,写给初学JDBC的小伙伴的八条建议)
关于JDBC学习过程中的注意事项(分享自己犯过的错误,写给初学JDBC的小伙伴的八条建议) 前言:最近在学习JDBC,总结了几个小问题,特地分享给大家,让大家不要犯这样的错误,也希望大家养成学会总结的 ...