Question

我在使用PHP和jQuery的文件上传表单中遇到了问题。表单可以一次上传多个图像，这些图像可以在滑块中预览，其形式包含两个以上的字段标题和说明。 slider正在通过jQuery工作。当用户通过单击选择文件（<input type="file" multiple=""/>）选择多个图像时，所有图像将显示在滑块中，其他两个字段（标题和说明）。每个图像都有这两个字段来添加一些描述和标题。如果用户想要删除他不想上传的图像，他会点击删除按钮删除该图像（此删除按钮将附加每个图像）我使用.remove（）函数删除图像来自滑块的两个字段但是当我在服务器端提交表单时出现问题图像仅从滑块中移除而不是从input type="file"移除并将其提交到服务器。我知道输入类型文件是＆＃34; readonly＆＃34; 但请帮助我，无论如何要这样做，以便我可以阻止删除的图像在服务器上传。这是代码。

HTML

<form action="" method="post" enctype="multipart/form-data">
 <div> 
 <input type="file" name="image[]" multiple="multiple" id="my_file" onChange="readURL(this);"/>
</div>
 <div class="pic_preview">     
  <a class="prev" href="#">Previous</a> 

  <ul>

 </ul>

  <a class="next" href="#"><b>Next</b></a>

</div>
 <div class="set">
<ul>
</ul> 
 </div>
 <button class="btns">Cancel
</button>
<button class="post_btn">Post
</button>
</form>

的jQuery

    $(".my_file").change(function() {
      readURL(this);   
    });
    function readURL(input){
  for(var i = 0; i < input.files.length; i++) { 
      if (input.files && input.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e){

          $('.pic_preview ul').append("<li id="counter'+ e.target.result +'"><imgid="counter'+ e.target.result +'" style="width:500px; height:350px; border:10px;border-radius:10px;" src="' + e.target.result + '"/><input type="button"class="rem" value="remove"/></li>");

         $('.set ul').append("<li id="counter'+ e.target.result +'"><inputtype="text"name="caps[]" id="text" class="set" placeholder="Caption"/><textareaname="description[]"class="description" placeholder="description"></textarea<p><inputname="Tags[]" type="text"  id="text" class="set" placeholder="Tags"/></p></li>");};

    reader.readAsDataURL(input.files[i]);

};   

};
$('.pic_preview ul').bind('click', 'input', function(event){
     var removeItemID = $('input').parent("li").attr('id');
    // $("li img[id='"+removeItemID+"']").remove(); 
     $("li[id='"+removeItemID+"']").remove();
    $(".set li[id='"+removeItemID+"']").remove();
    });

      }

请帮助我或建议是否有更好的方法。

从输入类型=＆＃34;文件＆＃34;中删除文件多个通过jQuery

0 个答案: