欢迎使用CSDN-markdown编辑器

jquery 图片上传前预览

前言

最近遇到了一个非常悲催的问题。那就是我想到的永远都只是理论上存在但实际上却并不可行。哎！搞得焦头烂额。这不，一个前端的小问题又怼了将近一整天的时间。突然觉得是时候做作笔记了。以前学的前端的东西都快忘光了。（忏悔三秒钟）。记一下，说不定后来又用到又忘记了呢。

人生第一篇博客。没有什么特殊的理由，只是怕自己忘记的笔记。算是写给半年后的自己吧！

开始

问题： 图片上传前预览

应用场景：在asp.net mvc 框架下 要实现一个多图片上传。在图片上传前要先预览。就是要在本地的页面中先加载出来瞧一瞧。看传的是啥东东。就这么个问题。

首先呢，先扯开asp.net mvc 不谈。（这里面扯淡的东西有点多。一下还记不完。）就说一个图片上传前预览吧！ 图片上传前预览。嗯！这个简单，两分中搞定
于是开始写了

例子：

html<input name="picfile" id="selectFile" type="file" /><img id="imgShow" src="" />

一个文件选择输入器。一个img
思路呢，就是通过input[type=file] 文件选择器（这个名字我自己起的，这么叫应该没什么误解）选择一个文件，然后把这个文件的路径赋值给img的src 。这样就可以显示了（当然这个不可行）

暂且认为可行吧。先把反例写完

javascript//这里使用jqueryvar filePath=$("#selectFileInput").val()// 获取文件路径$("#imgShow").attr("src",filePath);//把路径设置到img的src

好了，完事儿了。然后兴冲冲的运行着先试一下，爽一爽。然而…………当然，要报错了。什么错误呢？在chorme 浏览器下面是
Not allowed to load local resource file：//…………
一脸懵逼。what？发生了什么，什么鬼……
好吧！意思就是不能加载本地图片，确切点说就是不能记载绝对路径下的图片。按照浏览器的说法就是为了安全。当然还没搞懂怎么个安全法。但是报错呢也就意味着上面的方法是行不通的。也就意味着如果要完成预览这个功能呢，得想其他办法了（废话）。

好吧！说重点。浏览器不允许直接加载图片。上面的方案被否决。那么如何加载呢？这里呢就牵扯到一个文件读取的问题。

大概原理就是等文件加载完毕呢显示出来。当然这个过程呢比较啰嗦。所以这里使用了一个网上找过来的插件。使用如下代码即可完成预览。

$(this).uploadView({    width: 270,    height: 198,    allowType: ["gif", "jpeg", "jpg", "bmp", "png"],    maxSize: 4,    success: function (e) {    }});

上面是我改过的一个方法

$(".js_upFile").uploadView({    uploadBox: '.js_uploadBox',//设置上传框容器    showBox : '.js_showBox',//设置显示预览图片的容器    width : 100, //预览图片的宽度，单位px    height : 100, //预览图片的高度，单位px    allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型    maxSize :2, //允许上传图片的最大尺寸，单位M    success:function(e){        $(".js_uploadText").text('更改');        alert('图片上传成功');    }});

这是作者的原本使用方法