表单中图片上传预览和删除功能

[commoccoom]

最近整一个表单，需要带有图片上传，预览和删除功能，后端是 php 的 ci 框架，想用传统的 js 和 jquery 实现，不使用前端框架，也找了一些资料，看得糊涂。想问下有什么适合新手，友好度高一点的教程没有。

现在用的是最基本的方法，可以上传多个图片，但是想把上传的多个图片做成幻灯片一样可以左右切换预览，并且带有删除当前显示图片这个功能

function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 for(var i=0;i<total_file;i++)
 {
  $('#image_preview').append("<img style='width: 480px;height:320px;' src='"+URL.createObjectURL(event.target.files[i])+"'><br>");
 }
}

上传之后的图片怎样才能用 js 来切换呢？

<div id="image_preview">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/22ba8853-006a-48af-9414-c4419bf4fda2">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/a17bab07-863e-4ff8-b5ef-ca4de1f225c2">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/67af359d-2ece-4ead-9e86-da38243d149f">
</div>

之前自己写过的 js 切换图片是在 <img> 标签里加入了data=0 data=1 之类的，现在是上传的图片，我应该怎样做标记才能使用 js 来切换图片呢？

[xiaoming1992]

这个问题我没有答案，但是给你个建议:

我没用过 php，不知道 php 能不能做到，但是我建议你搞个前后端分离，前端用现在流行的 r/v/ng 吧。这些框架之所以会流行，就是因为能极大地减少前端的工作量，降低心智负担。用 jq 也能做，但是太繁琐太累了。

[wenzichel]

预览的话，完全不用将图片传到后端才预览，使用 js 中的 fileReader，就可以在前端实现预览和查看原图的功能。你可以看下这篇文章

https://www.xiabingbao.com/html5/2015/05/20/html5-filereader-natural.html

[chenliangngng]

data=0 data=1 这是 bootstrap 吧，可以实现你的功能。你看下这个框架怎么玩，适合新手

[commoccoom]

@xiaoming1992
@wenzichel
@chenliangngng
感谢回复
目前先找了这个试下 https://github.com/kartik-v/bootstrap-fileinput