1
プレビューイメージファイルで複数のファイルをアップロード（<input type="file" multiple/>を使用）しています。イメージプレビューとfiledataを正常に削除できます。PHP Javascript - セレクタをonclickに変更できません。プレビューファイルを削除します。
問題は、私はfiledataを削除するためにonclickのセレクタを変更できないということです。 （私は他のセレクタに変更した場合、それが唯一のプレビュー画像を削除しますが、ファイルはまだ私のフォルダにアップロードする）
に成功し、その仕事を除去するためにクリックする選択が.selFileですが が、私はセレクタを変更したいときonclickを.selFile2に変更すると、filedataは削除されません）
これは私の焦点を絞ったコードラインです。 （私の完全なコードを表示するには、下に見てください）
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile'
title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>";
を...
私は
$("body").on("click", ".selFile", removeFile);
から
$("body").on("click", ".selFile2", removeFile);
に変更するが、それは唯一のプレビュー画像を削除しませんfiledataを削除します（まだ私のフォルダにアップロードされています） ..
コードを変更しようとしましたfunction removeFile(e) var file = $(this).data("file");〜var file = $('.selFile).data("file");結果は1件です。 ... どうすればいいですか？ここで
は私の完全なコード（2ページ）
firstpage.html（私はフォームを投稿するAJAXを使用）
<!doctype html>
<html>
<head>
<title>Proper Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
#selectedFiles img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom:10px;
cursor:pointer;
}
</style>
</head>
<body>
<form id="myForm" method="post">
Multiple Files: <input type="file" id="files" name="files[]" multiple><br/>
<div id="selectedFiles"></div>
<input type="submit">
</form>
<script>
var selDiv = "";
var storedFiles = [];
$(document).ready(function() {
$("#files").on("change", handleFileSelect);
selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".selFile", removeFile);
});
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>";
selDiv.append(html);
}
reader.readAsDataURL(f);
});
}
function handleForm(e) {
e.preventDefault();
var data = new FormData();
for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files[]', storedFiles[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function(e) {
if(this.status == 200) {
console.log(e.currentTarget.responseText);
alert(e.currentTarget.responseText + ' items uploaded.');
}
}
xhr.send(data);
}
function removeFile(e) {
var file = $(this).data("file");
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name === file) {
storedFiles.splice(i,1);
break;
}
}
$(this).parent().remove();
}
</script>
</body>
</html>
.. upload.phpページ
<?php
for($i=0;$i < count($_FILES["files"]["name"]);$i++)
{
if($_FILES["files"]["name"][$i] != "")
{
$tempFile = $_FILES['files']['tmp_name'][$i];
$targetFile = "upload/". $_FILES["files"]["name"][$i];
move_uploaded_file($tempFile,$targetFile);
}
}
?>
再生できません。 – guest271314