自己写代码修复 ace_file_input 叉删除按钮不起作用的情况

当开发需要本地上传图片，并且展示的时候，不自然的就会去用jquery插件，但是，有的时候不知是自己环境的原因还是其他的，明明示例里的 删除按钮起作用，但是，弄到自己的环境里，弄死不起作用。怎么办？？没办法，只有自己想办法来处理咯。

					<div class="col-xs-12" id='<portlet:namespace/>inputid'>
						<input multiple="" type="file" id="id-input-file-3"  name='<portlet:namespace/>epic' />
					</div>

很简单，只需要在前面放入一个input file标签即可，

然后初始化

$('#eqpic input[type=file]').ace_file_input({
	style:'well',
	btn_choose:'点击或者拖曳仪器图片',
	btn_change:null,
	no_icon:'ace-icon fa fa-cloud-upload',
	droppable:true,
	thumbnail:'large'
})

这样，当我们点击后即可上传图片和本地预览，但是删除按钮不起作用。

开发者模式可以发现页面是这样的。

<div class="col-xs-12" id="_ImproveEPInfo_WAR_ImproveEPInfoportlet_INSTANCE_201707131445_inputid">
	<div class="ace-file-input ace-file-multiple" style="border: 1px solid rgb(246, 250, 253);">
	<input multiple="" type="file" id="id-input-file-3" name="_ImproveEPInfo_WAR_ImproveEPInfoportlet_INSTANCE_201707131445_epic">
		<label class="file-label" data-title="点击或者拖曳仪器图片">
			<span class="file-name" data-title="No File ...">
				<i class="ace-icon fa fa-cloud-upload">
				</i>
			</span>
		</label>
		<a class="remove" href="#">
			<i class="icon-remove">
			</i>
		</a>
	</div>
</div>

现在，我们要做的就是给class 为remove的a 标签绑定一个点击事件。

由于安全因素的原因，不允许直接向input  type=file里面读写，所以换一个思路。

我们所有的上传图片jsp代码都是在id 为inputid的div中，那我们可以直接删除里面的元素，然后重新初始化不就可以了

好了。下面就是js代码了。

/* 自己绑定删除按钮 */
$(".remove").bind("click",function(){
	$("#<portlet:namespace/>inputid").empty();//第一步，删除div下的所有元素
 	
	$('<input>',{
		type:'file',
		id:'id-input-file-3',
		name:'<portlet:namespace/>epic',
		multiple:''
	}).appendTo($('#<portlet:namespace/>inputid')); 
 	//第二步，由于删除了div下所有的元素，所以需要新建一个input file标签来初始化
	$('#eqpic input[type=file]').ace_file_input({
		style:'well',
		btn_choose:'点击或者拖曳仪器图片',
		btn_change:null,
		no_icon:'ace-icon fa fa-cloud-upload',
		droppable:true,
		thumbnail:'large'
	});
	//第三步，初始化 input file 标签
});