图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)
直接上代码
html和js
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
fieldset {
width: 400px;
height: 150px;
} .uploadImg {
width: 40px;
height: 40px;
} a {
padding: 10px;
text-decoration: none;
border: 2px solid #e27b32;
position: relative;
top: 17px;
left: 24%;
color: #d46c6c;
border-radius: 18px;
} .outputContain {
width: 400px;
height: 56px;
overflow-x: auto;
overflow-y: hidden;
}
</style>
</head>
<body>
<fieldset>
<legend>上传图片-获取图片</legend>
<div class="contain">
<form enctype="multipart/form-data" method="post" name="form">
<input type="file" id="file" name="file" multiple="multiple" />
</form>
<div id="progress"></div>
<div class="outputContain">
<div id="output"></div>
</div>
<a href="javascript:clear()">清空所有</a>
<a href="javascript:uploadFile()">上传文件</a>
</div>
</fieldset> <a href="javascript:testReq()">测试请求</a> <script>
'use strict' var progressTip = document.getElementById('progress'),
outPutTip = document.getElementById('output'),
fileInput = document.getElementById('file'); //ajax+FormData上传文件
function uploadFile() {
var formData = new FormData(document.forms.namedItem('form'));
var needResult = 0;
formData.append('needResult', needResult);
var xhr = new XMLHttpRequest();
xhr.open('post', '/home/upload', true);
xhr.setRequestHeader('testHeader', 'testHeader');
xhr.timeout = 60 * 1000;
xhr.ontimeout = function (event) {
progressTip.innerHTML = '超时(60s)';
} xhr.onload = function (event) {
progressTip.innerHTML = '上传完成';
if (this.status === 200) {
//needResult == 1 && this.responseText.toString().split('|').forEach(function (url) {
// getImg(url);
//});
} else {
progressTip.innerHTML = 'error:状态码：' + this.status + ' 错误消息：' + this.statusText;
}
} xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var pro = ((event.loaded / event.total).toFixed(4) * 100).toFixed(2);
progressTip.innerHTML = '上传进度:' + pro + '%<br/>';
}
} xhr.send(formData);
} //ajax下载文件
function getImg(url) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status === 200) {
getFileReaderResult(this.response, function (result) {
appendImgToBox(result);
});
} else {
progressTip.innerHTML = '发生错误';
}
}
xhr.send();
} //返回blog:图片链接的预览
function getFileUrl(file) {
var src = window.URL.createObjectURL(file);
return src || '';
} //FileReader读取文件，返回base64的图片
function getFileReaderResult(blob, callback) {
var fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onprogress = function (event) {
if (event.lengthComputable) {
var pro = ((event.loaded / event.total).toFixed(4) * 100).toFixed(2);
progressTip.innerHTML = '预览进度:' + pro + '%<br/>';
}
}
fileReader.onloadend = function () {
progressTip.innerHTML = '预览完成';
typeof callback === 'function' && callback(this.result);
}
} //添加一个预览图到预览列表里面
function appendImgToBox(src) {
outPutTip.innerHTML += '<image class="uploadImg" src="' + src + '"/>';
var imgCount = document.getElementsByClassName('uploadImg').length,
singleImgWidth = document.getElementsByClassName('uploadImg')[0].offsetWidth;
outPutTip.style.width = imgCount * singleImgWidth + 'px';
} //重置页面
function clear() {
outPutTip.innerHTML = '';
outPutTip.style.width = '0px';
fileInput.value = '';
} //选择文件后生产预览图
fileInput.addEventListener('change', function (e) {
for (var i = 0; i < e.target.files.length; i++) {
getFileReaderResult(e.target.files[i], function (result) {
appendImgToBox(result);
});
}
}); function testReq() {
var xhr = new XMLHttpRequest();
xhr.open('post', '/home/add', true);
xhr.onprogress = function (e) {
console.log(e);
}
xhr.upload.onprogress = function (e) {
console.log(e);
} xhr.onload = function () {
if (this.status == 200) {
if (this.readyState == 4) {
alert('完成');
}
}
}
xhr.send();
} </script>
</body>
</html>
C#后台接收上传的文件
public string Upload()
{
HttpFileCollectionBase files = Request.Files;
string dirName = "Upload";
string saveDir = Server.MapPath("~/" + dirName + "/");
if (!Directory.Exists(saveDir)) Directory.CreateDirectory(saveDir);
List<string> uploadedFiles = new List<string>();
string baseUrl = Request.Url.Scheme + "://" + Request.Url.Host + ":" + Request.Url.Port + "/";
for (int i = ; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
if (file.ContentLength == ) continue;
FileInfo fileInfo = new FileInfo(file.FileName);
string fileName = Guid.NewGuid().ToString("N") + fileInfo.Extension,
savePath = Path.Combine(saveDir, fileName);
file.SaveAs(savePath); uploadedFiles.Add(baseUrl + dirName + "/" + fileName);
} return Request.Form["needResult"] == "" ? string.Join("|", uploadedFiles) : string.Empty;
}
预览来一发：
图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)的更多相关文章
- 支持多文件上传，预览，拖拽，基于bootstra的上传插件fileinput 的ajax异步上传
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 支持多文件上传，预览，拖拽，基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 如何使用JavaScript直接上传并预览粘贴板的图片？
(题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- 本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...
随机推荐
- Mrakdown文本编辑器
http://www.csdn.net/article/2014-05-05/2819623 WMD WMD (wmd-editor)是一个简单轻量级的HTML编辑器,使用的是 Markdown 文本 ...
- python之json
import json import requests re = requests.get('http://wthrcdn.etouch.cn/weather_mini?city=成都') re.en ...
- 研究不定数量参数的函数并实现一个printf函数
一.前提知识 1.如何传递参数(主函数) a.函数的参数是通过栈传递,而且是从右到左依次入栈 b.即使是char型变量,在传递参数时,也是占用两个字节,因为push操作是两个字节为单位的. c.sho ...
- OC－深浅复制
[OC学习-26]对象的浅拷贝和深拷贝——关键在于属性是否可被拷贝 对象的拷贝分为浅拷贝和深拷贝, 浅拷贝就是只拷贝对象,但是属性不拷贝,拷贝出来的对象和原来的对象共用属性,即指向同一个属性地址. 深 ...
- Unity问答——NGUI怎么使用按键模拟鼠标点击？
这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/248 问:NGUI怎么模拟用代码模拟控制点击 答: 1. 这个问题问得好.因为在使用按键 ...
- temp 临时文件
放假了,放假了:http://blog.csdn.net/skywalker_only/article/details/17076851 nucht2.2.1爆出如下异常: Exception in ...
- 利用CSP探测网站登陆状态
0x00 背景 今天看到zone里有同学发帖说了探测支付宝登录状态的帖子:http://zone.wooyun.org/content/17665 由此我想到了我们parsec的@/fd 半年前提到的 ...
- MYSQL查看和修改存储引擎
最近,公司的BBS压力越来越大,表死锁越来越严重. 在其它优化同作的情况下,MYISAM引擎转为INNODB引擎也纳入计划当中. 参考URL如下:简单,但要注意备份... ============ h ...
- java中String s="abc"及String s=new String("abc")详解
1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直 ...
- 深入浅出 Java Concurrency (3): 原子操作 part 2
转:http://www.blogjava.net/xylz/archive/2010/07/02/325079.html 在这一部分开始讨论数组原子操作和一些其他的原子操作. AtomicInteg ...