用普通的html的 <input type="file"/> 标签是不能实现实时预览功能的，获取表单的值可以得到图片所在路径：C:\fakepath\test.png，如果将它直接赋值给img标签的href属性，会报错：Not allowed to load local resource（不允许加载本地资源）。
功能实现可以通过file标签和js的 FileReader 接口来实现此功能：
把选择的图片文件调用readAsDataURL方法把图片数据转成base64字符串形式显示在页面上给a标签定义 href属性 和 download=”文件名.后缀名”，就可以实现点击下载的功能<input type="file" id="uploadImg" onchange="xmTanUploadImg(this)"> <img src="" alt="" id="selectImg"> <a href="javascript:void()" download="picture.jpg" id="xmTanDownload">点此下载</a> <script> function xmTanUploadImg(obj) { var file = obj.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { //成功读取文件 var img = document.getElementById("selectImg"); img.src = e.target.result; //或 img.src = this.result / e.target == this //实现点击下载图片功能 var xmTanDownload = document.getElementById("xmTanDownload"); xmTanDownload.setAttribute("href", e.target.result); //给a标签设置href }; } </script>
12345678910111213141516171819 效果图
