入力ファイルのアップロードの重複を確認する方法は？

私はこのフォームにファイルアップロード用のボタンがあります。ファイルを選択すると、upload_prev divに表示されます。私の問題は、同じファイルを選択しようとしても何も起こらないということです。私はバリデーションや種類の複製機能を実行したいです。私はそれをしました。私は、子ノードを使ったり、内部のテキストが同じかどうかを調べたりといった多くのことを試しました。私はそれぞれjqueryを使ってループして値を取得しようとしましたが、すべてが失敗しました。もう一度選択すると、このファイルが既にupload_prevのボックスに入っているというメッセージを表示したいと思います。入力ファイルのアップロードの重複を確認する方法は？

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 

     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> 

     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> 

    <style type="text/css"> 
    .fileUpload { 
    position: relative; 
    overflow: hidden; 
    margin: 10px; 
} 

.fileUpload input.upload { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 20px; 
    cursor: pointer; 
    opacity: 0; 
    background-color: #fff; 
    filter: alpha(opacity=0); 
} 

.buttonwrap { 
    text-align: center; 
    padding-top: 20px; 
    float: left; 
    display: block; 
} 

.buttonsend:hover { 
    background-color: rgba(255, 255, 255, 0.2); 
    color: #225C51; 
} 

.buttonsend { 
    text-decoration: none; 
    color: #fff; 
    font-size: 18px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: rgba(72, 133, 130, .5); 
} 

span { 
    float: left; 
    display: flex; 
    width: 100%; 
} 

p.closed { 
    margin: 0 0 0 7px; 
    cursor: pointer; 
} 

    </style> 

    <title></title> 

<script type='text/javascript'>//<![CDATA[ 

$(window).load(function(){ 
// TO CLOSE THE SLECTED FILE 
$(document).on('click', '.close', function() { 
    $(this).parents('span').remove(); 
}) 

//JUST TO PUT A VALUE IN THE BOX WHICH HAS 
document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 

document.getElementById('uploadBtn').onchange = uploadOnChange; 
//document.getElementById('uploadBtn').onchange = myFunction; 


function uploadOnChange() { 

    var filename = this.value; 
    var lastIndex = filename.lastIndexOf("\\"); 
    if (lastIndex >= 0) { 
    filename = filename.substring(lastIndex + 1); 
    } 


// alert (filename); 

    var files = $('#uploadBtn')[0].files; 

    for (var i = 0; i < files.length; i++) { 
    $("#upload_prev").append('<span>' + '<div class="hesh">' + files[i].name +'</div>' + '<p class="close">X</p></span>'); 
    } 
    document.getElementById('filename').value = filename; 

     document.getElementById("demo").innerHTML = files.length; 

} 


});//]]> 

</script> 


</head> 

<body> 
    <FORM METHOD="post" ACTION="" ENCTYPE="multipart/form-data"> 
<!-- <input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />--> 
    <div class="fileUpload btn btn-primary"> 
    <span>Browse</span> 
    <input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" /> 
    </div> 
    <input id="filename" type="text" /> 

    <div id="upload_prev"></div> 


    <div style="clear:both;"></div> 
    <div class="buttonwrap"> 
    <a href="contactus.html" class="buttonsend" style="float:right;">Send </a> </div> 
</FORM> 

    <p id="demo"></p> 

</body> 

</html>

これは私のフィドルです。どのようにこれを行う方法を見つけることができます。

https://jsfiddle.net/Lc5gb7c9/

出典

2016-06-19 hesh

注意、<div>と<p>要素が

// outside of 'onchange' var arr = []; for (var i = 0; i < files.length; i++) { if (arr.indexOf(files[i].name) === -1) { arr.push(files[i].name) $("#upload_prev").append('<div>' + '<div class="hesh">' + files[i].name + '</div>' + '<p class="close">X</p></div>'); } else { alert(files[i].name + " already selected") } }

<span>要素の有効なコンテンツではありませんが複数回アップロードされてから、同じファイルを防止するための要件ですか？ – guest271314

はい私はこのファイル名が利用可能であるかどうか私のビューでチェックしたいです。利用可能な場合は、ファイルがビューに追加されていない場合、そのファイルはすでにリストに入っています。 – hesh

選択したファイルもアップロードする必要がありますか？ – guest271314

あなたは、他の配列にファイル名を追加し、コールalert()true場合、ファイル名が配列に追加されているかどうかを確認するためにArray.prototype.indexOf()を使用し、files[i].nameを格納する配列を作成することができます。処理中はいつでもアレイを[]にリセットできます。 jsfiddle https://jsfiddle.net/Lc5gb7c9/2/

出典

2016-06-19 04:19:45 guest271314

本当に働いてくれてありがとう、ありがとう、もう一度ありがとう。？ indexOf（files [i] .name）=== -1私が理解していることを私が確認してくれれば、あなたはそれをしてくれました。 – hesh

@hesh 'files [i] .name'が' arr'配列に存在しない場合、ファイル名を配列にプッシュします – guest271314

私は、あなたがどのようにあなたは、DOMにファイルを割り当てることで問題に実行していると思います。 FileListsは読み取り専用です。つまり、複数のファイルを選択してから、既存の要素に追加して追加することはできません。

しかし、あなたがJavaScript配列にそれらを追加することができます

https://jsfiddle.net/Lc5gb7c9/3/

：だから

files=[]; files.push(fileList);

は、私はこの機能だけでなく、あなたが求めていたチェックを含めるようにJSFiddleを編集しました

formDataオブジェクトを作成し、uploaded_files配列をループしてtに追加する必要があるため、Ajax経由でアップロードする方法については、 http://blog.teamtreehouse.com/uploading-files-ajaxをご覧ください。彼はformDataキーを修正します。彼らは、html要素からファイルを取得しているが、あなたはすでにuploaded_files配列内のファイルを持っているので、あなたはそれが好きだろう：それは完了だ後は

for (var i = 0; i < uploaded_files.length; i++) { 
     formData.append('files[]', uploaded_files[i], uploaded_files[i].name); 
}

は、あなたのAJAX呼び出しを行うことができます。

出典

2016-06-19 04:19:10

本当にありがとう、私と一緒に働いてくれてありがとう、私は今ブログを見ています。本当にありがとうございました。 – hesh

入力ファイルのアップロードの重複を確認する方法は？

答えて

関連する問題