Javascript 使用jQuery从输入[type=";file";]中删除文件

Javascript 使用jQuery从输入[type=";file";]中删除文件,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个输入[type=“file”]有多个选项。我做了预览功能,用户可以在提交前点击按钮删除图片。通过remove()函数可以在浏览器上很好地删除图像,但问题是,在提交时,包括已删除图像在内的输入值会被发布。我不知道如何删除输入的实际值 我试着在服务器端删除它。 这是html代码的一部分 <div class="col-xs-4 vcenter from-group"> <span class="glyphicon glyphicon-asterisk" style="col

我有一个输入[type=“file”]有多个选项。我做了预览功能,用户可以在提交前点击按钮删除图片。通过remove()函数可以在浏览器上很好地删除图像,但问题是,在提交时,包括已删除图像在内的输入值会被发布。我不知道如何删除输入的实际值

我试着在服务器端删除它。 这是html代码的一部分

<div class="col-xs-4 vcenter from-group">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span><label for="inputScreenshots">스크린샷</label>
<p style="display:inline; padding-left:270px; color:red; font-size: 12px">* 이미지 사이즈 : 800 X 450</p>
<input type="file" id="inputScreenshots" name="inputScreenshots[]" class="form-control" accept="image/*" multiple>
<div id="filenameList" style="width : 400px">
    <div id="insertScreenshots" style="margin : 30px; position :relative;">
        <input type="hidden" name="screenshots_filename[]" value="<?=$screenshot_urls?>">
    </div>
</div>

스크린샷

*이미지 사이즈 : 800 X 450

可能的重复可能的重复
$ss_upload="false";
if (isset($_POST["del_screenshots"])){
// del_screenshots are images that deleted from client.
$ds_count = $_POST["del_screenshots"];
    foreach($ds_count as $del) {
        echo "<br/> del_screenshots : ".$del;
    }
}

$ss_count = sizeof($_FILES['inputScreenshots']['tmp_name']);
// ss_count is the size of all images including deleted images from input field.
echo "<br/>ss_cout : ". $ss_count;

for ($i = 0; $i < $ss_count; $i++) {
$tmpFilePath = $_FILES['inputScreenshots']['tmp_name'][$i];
$tmp_filename = $_FILES['inputScreenshots']['name'][$i];
// tmp_filename is the posted real file name.
echo "<br/> tmp_filename".$i. " : " .$tmp_filename;
//=========================================================================
for ($j = 0; $j < sizeof($ds_count); $j++) {
    // Compare all images name and deleted images name
    if (strcmp($ds_count[$j] ,  $tmp_filename) == 0)    {
        echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==>  " ."true";
       // The $tmp_filename has to be deleted. not to be uploaded to server.
       // $tmp_filename = null; 
    }else {
        echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==>  " ."false";
        // This files are okay to be uploaded to server.
    }
}
//=========================================================================
$ext = pathinfo($tmp_filename, PATHINFO_EXTENSION);
//  $ext = pathinfo($_FILES['inputScreenshots']['name'][$i], PATHINFO_EXTENSION);
echo "<br/>". $i . " ext (pathinfo) : ". $ext;
if ($ext == "") {
    continue;
    $ss_upload="false";
}
$newFilePath = uniqid().".".$ext;
if ($screenshots != "") {
    $screenshots .= "+";
}
$screenshots .= $newFilePath;
// $screenshots has be uploaded to DB except the deleted images. (ex : uniqFileName.png + uniqFileName.png + .. )

    echo "<br/> 1) screenshots : ". $screenshots;
    move_uploaded_file($tmpFilePath, $SS_PATH."/".$newFilePath);
    $ss_upload="true";
}
$("#inputScreenshots").change(function(){
    $("#filenameList div.notyet").remove();
    for(var i = 0, len = this.files.length; i < len; i++){
        var file = this.files[i];
        var fr = new FileReader();
        fr.onload = screenshots_processFile(file);
        fr.readAsDataURL(file);
    }
});

var screenshots_processFile = function screenshots_processFile(file) {
 return (function(file) {
 return function(e) {
     var div = document.createElement("div");
     $(div).addClass("notyet").css({
        margin: "30px",
        position: "relative"
      });
      var html = [,'<img src="" width="100%" id="tmp_screenshots">'
                 ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                 ].join("");
      $(div).append(html);
      $(div).find("button").click(function() {
         alert("remove");
       //=========================================================== * TODO : remove the files in server!
        var targetDom = document.getElementById( "filenameList" );
        var targetInput = document.createElement("input");
        targetInput.setAttribute("name", "del_screenshots[]" );
        targetInput.setAttribute("type","hidden");
        targetDom.appendChild(targetInput);
        alert(file.name);
        targetInput.setAttribute("value", file.name);
       //===========================================================
         $(this).parent().remove();
      });
      $(div).find("img").attr("src", e.target.result);
      $("#filenameList").append(div);
    }
  })(file)
};
$ss_upload="false";
if (isset($_POST["del_screenshots"])){
$ds_count = $_POST["del_screenshots"];
foreach($ds_count as $del) {
    echo "<br/> del_screenshots : ".$del;
}
    //echo "<br/> << TEST >>"."<br/>ds_count[0] : " . $ds_count[0]  . "<br/>ds_count[1] : " . $ds_count[1] ;
}

$ss_count = sizeof($_FILES['inputScreenshots']['tmp_name']);
echo "<br/>ss_cout : ". $ss_count;

for ($i = 0; $i < $ss_count; $i++) {
$tmpFilePath = $_FILES['inputScreenshots']['tmp_name'][$i];
$tmp_filename = $_FILES['inputScreenshots']['name'][$i];
    echo "<br/> tmp_filename".$i. " : " .$tmp_filename;
    $ss_del_mode="false";
//=========================================================================


 if (isset($_POST["del_screenshots"])) {
for ($j = 0; $j < sizeof($ds_count); $j++) {
    if (strcmp($ds_count[$j] ,  $tmp_filename) == 0)    {
        echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==>  " ."true";
        $ss_del_mode = "true";
    }
}
}
//=========================================================================
$ext = pathinfo($tmp_filename, PATHINFO_EXTENSION);


 //  $ext = pathinfo($_FILES['inputScreenshots']['name'][$i], PATHINFO_EXTENSION);

echo "<br/>". $i . " ext (pathinfo) : ". $ext;
if ($ext == "") {
    continue;
    $ss_upload="false";
}
if ($ss_del_mode == "true") {
    echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]";
    $newFilePath = "";
} else {
    $newFilePath = uniqid().".".$ext;
    echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]";
}
if ($screenshots != "") {
    if ($ss_del_mode != "true"){
        echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]". "   --> screenshots";
        $screenshots .= "+";
    }
}
$screenshots .= $newFilePath;
echo "<br/> 1) screenshots (newFilePath) : ". $screenshots;
if ($newFilePath != "") {
    move_uploaded_file($tmpFilePath, $SS_PATH."/".$newFilePath);
}
$ss_upload="true";
}