文章目录
  1. 1. 一、上传前本地预览问题
  2. 2. 二、input file 美化传遇到的问题

最近工作中遇到上传图片(文件)的需求,本来想上传前本地预览,这样避免垃圾数据,因为提交表单再上传文件流,火狐下可以通过一些方法实现,但ie出现各种问题。

虽然有一些插件可以解决,但也涉及体验性问题等,现总结一下。

一、上传前本地预览问题

火狐可以通过以下代码获取图片路径:

var docObj = document.getElementById("fileInput");
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   

网上搜了很多资料说IE可以通过滤镜的方式实现,但经本地测试,行不通,最终放弃上传前预览,改为实时上传使用ajaxfileupload.js插件来实现实时上传,再回显。

二、input file 美化传遇到的问题

因原生上传文件的input太丑,所以需要美化上传按钮,隐藏原生按钮,使用图片或其他元素代替。有以下两种方式处理:

  1. input file 自身隐藏(display:none),利用按钮或元素的点击事件,触发input file的click事件,弹出文件选择框,选择完文件后上传。但遇到IE下ajaxfileupload.js上传失效问题,因为处于安全性考虑,在ie下会报 “权限不足” 问题。所以此方法行不通。

  2. 将input设置为透明,但z-index值比图片的z-index值更大,点击底层的图片或其他元素,实际上是点击的透明的上传input按钮。但ie下会出现光标的问题。后经测试,可以通过设置font-size把浏览文件的按钮放大,使其覆盖整个图片或者点击的元素。

参考文章:

多图片上传预览(纯前端)

input file 美化

文章目录
  1. 1. 一、上传前本地预览问题
  2. 2. 二、input file 美化传遇到的问题