关于js图片上传问题

Question

代码如下

<input id='inputFile' type="file">
<img id='showa' src="img/userpic_moren.png" alt="">
<img id='showb' src="img/userpic_moren.png" alt="">
$('#inputFile').on('change', function(){
    var a = $('#inputFile')[0].value,
    b =  window.URL.createObjectURL($('#inputFile')[0].files.item(0))；
    $('#showa').attr('src', a);
    $('#showb').attr('src', b);
})

我想问一下 a和b的区别在哪？

Answer 1

按照这篇文章的说法
http://www.cnblogs.com/saysmy...

1. filereader 和 URL.createObjectURL 两种方式都可以实现图片预览
2. creatObjectURL可能会有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。
3. filereader在某些浏览器下,获取的内容会缺少图片格式,但是createObjectURL得到的是一个http格式的文件，即使input file的文件类型不存在也不会编码失败。
   想要实现图片预览,使用creatObjectURL的方式,兼容性比较好

Answer 2

$('#inputFile')[0].value可能会取到c:fakepath，不是真实路径

Answer 3

var a = $('#inputFile')[0].value,

            b =  window.URL.createObjectURL($('#inputFile')[0].files.item(0));

a取到的只是图片在你系统中的路径，这个没什么用，你上传图片肯定是要大家看到的，你只有你电脑上图片的路径，存到数据库是没有意义的，别的电脑都无法访问到。
b里面的$('#inputFile')[0].files.item(0)这个是取的上传的这个图片对象，包含图片的信息，$('#inputFile')[0].files这个原本是一个数组，可以存放多个对象的，因为input是可以设置选择多个图片的，然后b这里的是取到图片对象数组的第一个对象，然后再使用window.URL.createObjectURL()将这个图片对象转换成对应的blob对象，传到数据库后，在通过相对应的方式解析成图片从而实现对图片的访问。