h5图片上传预览与拖拽上传
图片上传：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
if(typeof FileReader == "undified") {
alert("您老的浏览器不行了！");
}
function showDataByURL() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsDataURL(resultFile);
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
};
}
}
function showDataByBinaryString() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
//异步方式，不会影响主线程
reader.readAsBinaryString(resultFile);
reader.onload = function(e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
function showDataByText() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsText(resultFile,'gb2312');
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
</script>
</head>
<body>
<input type="file" name="fileDemo" id="fileDemo" multep/>
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
<input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/>
<input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/>
<div id="result">
</div>
</body>
</html>
图片拖拽上传：
<!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8">
<title></title>
<style> #div{
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<script>
/* dataTransfer对象：
16 1.files:获取外部拖拽的文件，返回一个filesList列表，是对象集合，自然有length属性；
17 2.filesList下有个type属性，返回文件的类型；
18 3.fileReader:读取文件信息
19 ①readAsDataURL(argument):参数为读取的文件对象，将文件读取为DataUrl；
20 ②onload:当文件读取成功时触发此事件；
21 ③this.result:获取读取的文件数据，如果是图片，将返回base64格式的图片数据；
22 */
onload= function () {
var oDiv=document.getElementById('div');
var oUl=document.getElementById('ul');
oDiv.ondragenter= function () {
this.innerHTML='现在可以释放文件了';
}
oDiv.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
}
oDiv.ondragleave= function () {
this.innerHTML='将文件拖放到此区域';
}
oDiv.ondrop= function (ev) {
ev=ev||event;
ev.preventDefault();
var fs = ev.dataTransfer.files;
//浏览器的默认行为是：将图片文件拖放到此处会在浏览器中打开图片 var fs=ev.dataTransfer.files;
//console.log(fs.length);
//console.log(fs[0].type);
for(var i= 0,len=fs.length;i<len;i++){
/* indexOf(searchvalue,formindex):返回某个指定的字符串值在字符串中首次出现的位置。
45 1.searchvalue:规定需检索的字符串类型；
46 formindex：可选的整数参数，规定在字符串中需检索的位置，它的合法取值是0-stringObject.length-1,如果省略此参数，则将从字符串的首字符开始检索；
47 2.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。
48 如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
49 3.indexOf()对大小写敏感；
50 4.如果要检索的字符串没有出现，则返回-1；
51 */
if(fs[i].type.indexOf('image')!==-1){
var fd = new FileReader();
fd.readAsDataURL(fs[i]);
fd.onload= function () {
//console.log(this.result);
var oLi=document.createElement('li');
var oImg=document.createElement('img');
oImg.src=this.result;
oUl.appendChild(oLi);
oLi.appendChild(oImg);
}
}else{
alert('亲，请上传图片！');
}
}
}
}
</script> </head>
<body>
<div id="div">将文件拖放到此区域</div>
<ul id="ul"></ul>
</body>
</html>
h5图片上传预览与拖拽上传的更多相关文章
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 支持多文件上传，预览，拖拽，基于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 ...
- C# MVC Ajax上传多个图片，可预览，可重复上传等
//上传文件 function UploadFile(el) { var dataValue = $(el).attr("data-id"); var ele = dataValu ...
- js 移动端 多图上传 预览 删除 base64转为url 传给后端
说下主要的逻辑,首先是利用input type="file",上传文件,然后判断文件类型是否是图片,这里要注意(multiple,安卓一次一张,ios可以多张). 接着把本地图片转 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- React + js-xlsx构建Excel文件上传预览功能
首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...
- 实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
随机推荐
- WinCE6.0多国语言软键盘
N久以前写过一篇<WinCE下自定义的大软键盘>,这个自定义软键盘就是为RM905a+项目来做的.RM905a+的系统分辨率是640*480,WinCE原生键盘小的太小,大的又太大.所以就 ...
- eclipse配置javacv0.8
之前配置了一次javacv,但是忘了做笔记,这次又重新查了一遍资料,很多东西模棱两可,浪费了很多时间,这次配置成功,总结如下,希望能帮到大家. 如不明确,可以联系我. javacv下载 https ...
- 使用虚幻引擎中的C++导论（四-内存管理与垃圾回收）（终）
使用虚幻引擎中的C++导论(四)(终) 第一,这篇是我翻译的虚幻4官网的新手编程教程,原文传送门,有的翻译不太好,但大体意思差不多,请支持我O(∩_∩)O谢谢. 第二,某些细节操作,这篇文章省略了,如 ...
- GPUImage相关(转)
3.滤镜 除了上面提到的美颜和水印之外,视频中还有很多其它的处理效果也在这个环节完成.七牛直播云提供的 SDK 在开放性设计基础之上,通过数据源回调接口,可以支持各种自定义滤镜的接入. 为了实现丰富的 ...
- html弹出窗并用遮罩层的实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- TJI读书笔记13-内部类
TJI读书笔记13-内部类 TJI读书笔记13-内部类 创建内部类 内部类和外部类的关系 .this和.new 内部类和向上转型 局部内部类 匿名内部类 匿名内部类的定义和初始化 使用匿名内部类来实现 ...
- 开源GIS简介.学习
开发者都希望自己的软件能够运行在尽可能多的计算机上.然而事与愿违,摆在 GIS开发者面前的仍然是对峙的平台.J2EE随着Java5.0的发布,已经正式更名为JavaEE,而微软也正式发布了.NET2. ...
- asp.net前台绑定时间格式时，定义时间格式
<%#Eval("news_time","{0:yyyy-MM-dd}") %><%#((DateTime)Eval("news_t ...
- Spring 4集成 Quartz2(转)
本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度.Spring 为简化 Quartz 的操作提供了相关支持类.本文示例使用的相关工具如下: Spring 4.2. ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...