前端图片上传问题整理

问题整理

最近做的项目是要实现多张上传图片的功能，可以删除图片，选中多张图片并重新上传，在实践过程中遇到了以下问题：

1. 图片如何更好的布局以及删除及选中效果如何实现
2. 利用<input type="file">上传图片时，上传同一张图片失效
3. 上传多张图片时，如何读取多张上传文件
4. <input type="file">同时添加单击和双击事件，单击事件触发两次
5. 利用get方式传递参数，中文乱码问题

1.图片效果

为实现图1中的效果，需要解决两个问题：第一个是如何进行图片布局；第二个是如何实现删除及选中效果。

• 图片布局
  对于图片布局，利用<img><span><input>这三个标签是可以实现图1中的样式的，但是需要进行样式调整，而且图片多张进行排列的时候间距及布局不好把握。
  在插入图片方面，HTML5提供了<figure>标签来插入图片，并提供<figcaption>来描述图片。

<figure>
	<figcaption>图片描述：
		<input tppe="text"></input>
	</figcaption>
</figure>

• 删除及选中效果
  在插件样式方面，boostrap提供了丰富的插件样式，可以实现图1中需要的删除及选中效果。
  需要注意的是，删除的叉号标志需要定位到图片的右上角，可以利用绝对定位的方式来实现。选中效果则需要以下三步来完成：将对号定位到图片中间位置，为对号添加蓝色圆形填充，将对号定位到圆形填充的中央。

position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;

border: 2px solid blue;
border-radius: 50%;

text-aligh