图片预览(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 ...
随机推荐
- C#中静态方法和非静态方法的区别（一）
实例方法比静态方法多传递一个隐含的指针参数,该指针指向该方法所从属的已被实例化的对象.这一区别的外在表现为实例方法内可使用this关键字代表所从属的实例对象,而静态方法不可使用this因为静态方法不针 ...
- Python面向对象OOP
一 OOP 与C++和Java一样,Python同样具有OOP设计. 过程式:从前到后,一条一条,机器能接受的顺序性方式:方式大概为"首先你应该做什么,第二应该做什么,高级点的做点假 ...
- Latex及Beamer
一 资源 Latex编辑部 Codecogs,latex在线编辑可见
- 项目知识点.Part2
1. 取消collectionView头视图重叠情况:以下两种情况效果一样 但是有一点点bug 每次remove之后 需要把视图刷到上面才会显示(后续会改进方法) for (UIView *view ...
- 最新选择Godaddy主机方案美国数据中心教程指导
随着Godaddy官方管理层的变动之后,主营重心已经从当初的域名开始转向到域名和主机产品上.这点我们从其发布域名优惠信息的频率也可以看到,而且我们可以看到常年的主机半价优惠,以及针对主机销售年付方案赠 ...
- 转:PHP 5.4中的traits
原文来自于:http://www.cnblogs.com/thinksasa/archive/2013/05/16/3081247.html PHP 5.4中的traits,是新引入的特性,中文还真不 ...
- 【Java】如何访问服务器
HTTP协议---------->GET.POST.XMLHttpRequest TCP/IP协议 SOAP协议---------->Web Service Server的作用是处理HTT ...
- 23个经典JDK设计模式（转）
下面是JDK中有关23个经典设计模式的示例: Structural(结构模式) Adapter: 把一个接口或是类变成另外一种. o ● java.util.Arrays#asList() o ...
- python locals()和globals()
Python有两个内置的函数,locals() 和globals(),它们提供了基于字典的访问局部和全局变量的方式. 首先,是关于名字空间的一个名词解释.是枯燥,但是很重要,所以要耐心些.Python ...
- 数据结构（跳跃表）：NOI 2004 郁闷的出纳员
郁闷的出纳员 [问题描述] OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常, ...