图片预览(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 ...
随机推荐
- Ubuntu phpmyadmin 缺少mcrypt扩展解决方法
之前在登陆phpmyadmin的时候,会出现警告说缺少mcrypt扩展的错误,一直没去解决这个问题,觉得没什么影响就算了. 今天谷歌了一下,原来是php5没有启用mcrypt模块. sudo ph ...
- C#中调用WIN32的API
最近在学习C#中的GDI部分,本来尝试编写一个字幕控件(其实还是用label比较合适),但是发现控件中用GDI将整个控件粉刷貌似不行(应该是我水平不行),所以就去捣鼓了下WIN32的DLL,发现用AP ...
- bzoj2260: 商店购物 && 4349: 最小树形图
Description Grant是一个个体户老板,他经营的小店因为其丰富的优惠方案深受附近居民的青睐,生意红火.小店的优惠方案十分简单有趣.Grant规定:在一次消费过程中,如果您在本店购买了精制油 ...
- 转:PHP如何阻止用户上传成人照片或者裸照
原文来自于:http://www.hackbase.com/tech/2014-10-12/69367.html 当前,网络淫秽色情信息屡禁不止.屡打不绝,严重危害未成年人身心健康,严重败坏社会风气, ...
- Hibernate 框架的配置之一
1. 下载hibernate distribution 3.6.* final包 2. 解压zip包 3. 将lib目录下jpa和required目录下的jar包都拷贝到自己工程的WEB-INF目录下 ...
- Unity3d项目合作 场景的合并和还原
Unity3d项目合作 场景的合并和还原 特别声明:转载自Unity3D研究院 如何侵犯版权,请通知我删除! 摘要: 导出Unity场景的所有游戏对象信息,一种是XML一种是JSON.本篇文章我们把 ...
- H3C S5000和H3C S5500，俺来罗
S5开头,后面第二位数0-4搂二层交换机.5-9的为三层交换机. 小常识.
- hibernate 3.* C3P0配置 以及为什么需要连接池！
Hibernate自带的连接池算法相当不成熟. 它只是为了让你快些上手,并不适合用于产品系统或性能测试中. 出于最佳性能和稳定性考虑你应该使用第三方的连接池.只需要用特定连接池的设置替换 hibern ...
- nginx 1.3.9/1.4.0 x86 Brute Force Remote Exploit
测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! #nginx 1.3.9/1.4.0 x86 brute force remote exploit # copyri ...
- 总结linux无线命令wpa
关于wpa_supplicant: 用到wpa_cli命令 wpa_cli -iwlan0 add_network // wlan0 是无线网络设备的名字,增加一个网络,会返回 ...