图片上传

我们在做项目一般都要上传数据，但是有一些信息不单单是文字,字符,还有图片文件呢,涉及的信息包含图片，所以在这跟大家分享一个上传图片的方法。图片已经成为生活中不可或缺的东西。

我们要准备好相关的插件加载页面，没有页面，图片存在哪里呢?图片一般是放在页面的呢，最后再传入数据库的。

首先，设计img的选择框， 在input标签上type属性设置file。标签上也要嵌套一个方法，并把图片的ID传进来，因此系统才能获取的选择的图片。存放图片的页面样式可以根据自己喜好来设定。

页面的代码大致是这样:,div包裹一个img标签和一个input标签,img标签存放图片,input标签实现双击打开选择图片的效果.

这样就可以双击打开如下页面：

打开file表单，选择图片，要绑定input标签的ID，实现的代码如下。
function chooseImageFile(inputFileID) {$("#" + inputFileID).click();}

接下来呢？我们就是要上传图片了，图片上传关键步骤如下：
我们要把选择的图片显示在网友当中就要用到FileReader，这是一个接口，通过文件获取的接口来获取选择的图片并显示出来FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中。的数据，并将读取的数据放入到内存中去。

下面1-7是固定写法，可以直接拷贝到项目里使用.
1：选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src、当我双击选择图片打开，图片选择框里面的内容就发生了改变。因此就写了下面的function。

2：创建FileReader对象,new一个新的对象.
var imgReader = new FileReader();

3：写一条正则表达式 过滤图片文件,验证所有的图片格式,选择的图片要符合下面的要求,意思就是只能添加图片,其他文件无法上传
regexImageFilter=/^(?:image/bmp|image/cis\cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;

4：file表单改变事件，将选择的图片显示到img元素
function showImgToView(inputFileId)

5：选择图片文件，可以通过get(0).files[0]获取到页面传过来的图片
var imgFile = $("#" + inputFileId).get(0).files[0];
console.log(imgFile);

6：判断上传文件是否为图片格式
if (!regexImageFilter.test(imgFile.type)) {
layer.msg(“请选择有效的图片文件”, { icon: 0, title: “提示” });
}

readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。相当于把图片的路径提前出来,有路径才可以保存图片.
imgReader.readAsDataURL(imgFile);

7：读取文件 onload事件,使用readAsDataURL就会触发接口的onload事件.
imgReader.onload = function (evt) {
console.log(evt);

8:将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。 $("#IsImgStudentPicture").attr(“src”, evt.target.result);
$("#UsImgStudentPicture").attr(“src”, evt.target.result);

把图片路径给result,这样就能达到图片显示在页面的效果.最后一步就是保存图片.
以上就是上传图片的基本方法.也很实用.还有，图片上传到数据库是以进制方式存放的，所有要存入数据库的图片都要匹配格式，只能是图片的格式，并且要是系统认定的格式，所以前面多次要用到正则表达式。然后系统会解析页面传过来的图片文件，只有符合条件才能通过，不然会被拦截下来。
图片上传也是很实用，易用的，这些功能及代码也不断地完善，大家要跟随时代的步伐，多学多做，不然就要被这个社会淘汰了。