html5从一开始就给予开发者很多的期待,给开发者提供了众多新的API,不用像以前那样为了实现某个功能而写很多的代码。在以前,如果要实现图片的预览会怎么做呢,我上网科普得知了不少,鉴于安全的原因,web端的JS是不能直接读取文件的本地真是路径的,那么只能将图片上传到服务器上,然后再拿到图片的链接,这样才能实现基本的图片预览。
-
fileReader:现在html5提供的API不再让图片预览那么麻烦,FileReader提供了很多方法进行图片预览和文本读取,同时也提供了一整套完整的时间来捕获文件,它主要是用来把文件读入内存,并且读取文件中的数据。
-
fileReader接口方法:
方法 参数 描述 readAsDataUrl file 将文件读取为DataURL readAsText file 将文件读取为文本 -
fileReader接口事件:
事件 描述 onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadstart 读取文成触发,无论成功或失败 onloadend 读取时触发 onprogress 读取时
下面实现拖拽拉去图片
拖拽事件,采用的是html5中的drag和drop。
实现拖拽的步骤:
- 把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
- 编写与拖放有关的事件处理代码。
首先我们设置一个div为拖拽区域,告诉用户应该吧图片拖拽到什么位置,并设置div的样式
<style>
*{
margin:0;
}
.result{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body style="margin: 200px;">
<div id="result" class="result">
</div>
<ul>
此处是图片预览的位置所在
</ul>
然后我们给drag区域绑定上拖拽事件:
<script>
var oRes = document.getElementById("result")
var oUl = document.getElementsByTagName("ul")[0]
var obj = {}
oRes.ondragenter = function(){
this.innerHTML = "可以放"
//拖拽鼠标进入区域时
}
oRes.ondragover = function(e){
e.preventDefault()
//当对象拖动到目标对象时触发,并阻止默认事件
}
oRes.ondrop = function(e){
e.preventDefault()
var fs = e.dataTransfer.files //定义一个空对象接收文件的属性内容
for (var i=0;i<fs.length;i++) { //此处是为了实现可以拖动多张图片而建立for循环
var reader = new FileReader() //使用fileReader的时候 必须使用new运算符创建新对象
reader.readAsDataURL(fs[i]) //调用readAsDaraUrl方法读取文件
reader.onload = function(){ //获取到成功读取到的文件内容
if(!obj[this.result]){
var oLi = document.createElement("li")
var oImg = document.createElement("img") //生成新节点
oImg.src = this.result
oImg.width = 100 //设置图片长度宽度
oImg.height = 100
oLi.appendChild(oImg) //在li中添加该图片
oUl.appendChild(oLi) //在ul中添加该li
obj[this.result] = this.result
}else{
alert("不要重复提交")
//运用if方法 避免重复提交相同照片,此处判断图片的是否重复是根据图片所在的位置,
//当拖拽一张照片进入区域生成预览后存储该图片的数据,若相同即弹(“不要重复提交”)
}
}
}
}
</script>
这里有个需要注意的地方:需要给dragover和drop添加阻止默认事件,否则浏览器会采用file:///
的方式打开文件。drop事件执行后就是进行checkFile(),后续的操作与使用input[type=file]的操作一样。