jq多选加文件预览_jQuery实现图片添加及预览

效果如下：

方法：

添加图片使用了标签，将标签的type设置为file就可以点击打开文件夹添加文件了。

当前在页面表现为一个输入栏

如果不想要输入栏可以将其隐藏：将其display设置为none，并使用图片元素代替点击。相当于给点击选择文件换一种展现形式。

display:none;

添加一个图片表示点击该图片添加文件，然后给图片元素添加点击事件：点击触发input的点击事件：

openFile()函数用于触发input的点击：

functionopenFile() {

document.getElementById(atlas_photo).click();

}

也就是说，点击图片是为了点击输入框，点击图片导致了输入框的点击。

现在就完成了点击图片选择文件这一步了。接下来是将选择的文件显示出来，达成图片的预览效果。

这里使用jQuery中的prop()方法获取输入框中的数据值，然后使用FileReader()将图片信息读取为URL

prop() 方法设置或返回被选元素的属性和值。

FileReader()的readASDataURL()将文件读取为一段以data:开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里就将图片转化成了base64格式。

*FileReader()方法参考：https://www.cnblogs.com/LO-gin/p/6817319.html

然后用输入框获取到的图片的base64代替当前图片的地址。

functionviewImage() {var file = $("#atlas_photo").prop('files')[0];if(file) {

var reader = newFileReader();

reader.readAsDataURL(file);

reader.onloadend= function(even) {

$('#atlas-img').attr("src", even.currentTarget.result);

}}

}

这样就实现了图片的预览。

注意：当点击输入框但不选择任何文件时输入框内的内容将为空，但是预览的图片因为没有改变地址因此仍显示之前的图片，给人一种没有更换信息的错觉，如果没有将之前的文件信息保存的话在上传时就会出现错误。为了避免这个情况，可以使用中间变量保存之前的文件信息，如果当前操作没有选择任何文件的话就将之前的信息进行上传。

完成代码：

HTML