私はもっと多くの画像をアップロードしたい

Question

私は参加ボタンを押して入力ボタンを押して、現代のプレビューを見たいと思っています。 10人が出てきたい。空にあなたのreseting #dvPreviewのdivを変更する画像上の

htmlファイルのplzの下でそれの世話をする

$(function() { 
 
    $("#fileupload").change(function() { 
 
    $("#dvPreview").html(""); 
 
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
 
    if (regex.test($(this).val().toLowerCase())) { 
 
     if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) { 
 
     $("#dvPreview").show(); 
 
     $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val(); 
 
     } else { 
 
     if (typeof(FileReader) != "undefined") { 
 
      $("#dvPreview").show(); 
 
      $("#dvPreview").append("<img class=load>"); 
 
      var reader = new FileReader(); 
 
      reader.onload = function(e) { 
 
      $("#dvPreview img").attr("src", e.target.result); 
 
      } 
 
      reader.readAsDataURL($(this)[0].files[0]); 
 
     } else { 
 
      alert("This browser does not support FileReader."); 
 
     } 
 
     } 
 
    } else { 
 
     alert("Please upload a valid image file."); 
 
    } 
 
    }); 
 
});

.load { 
 
    width: 20%; 
 
} 
 
#dvPreview { 
 
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
 
    min-height: 400px; 
 
    min-width: 400px; 
 
    display: none; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" language="javascript"></script> 
 
<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<form method="post"> 
 
    <input id="fileupload" type="file" multiple="multitple" class="multi with-preview" /> 
 
    <hr /> 
 
    <b>Live Preview</b> 
 
    <br /> 
 
    <br /> 
 
    <div id="dvPreview"> 
 
    </div> 
 
</form>

Answer 1

$("#fileupload").change(function() { 
     $("#dvPreview").html(""); 

を助けます。

ここでは、このコード$("#dvPreview").html("");はempty のでremoveにこのコードをあなたのdivをリセットし、それが動作しますしてみてください。

Answer 2

これは

jQuery(function($) { 
 
    var URL = window.URL || window.webkitURL || {} 
 
    
 
    // no idea to add listener to the elm since you can't show them 
 
    if(!URL.createObjectURL) return console.info("can't preview images") 
 
    
 
    $("#fileupload").change(function() { 
 
    $("#dvPreview").html("") 
 
    
 
    // using the Image we can actually test if it's a image no mather what 
 
    // extension it is. This would avoid simple hacks when client change 
 
    // `hack.js` to `hack.png` 
 

 

 
    // since you have multiple files you can not do `$(this).val()` 
 
    // Sometimes you don't need jQuery... `this.value` is simpler here... 
 
    // instead you need to loop over the `files` property... 
 

 
    for (let file of this.files) { 
 
     // screw older ie versions 
 
     let img = new Image 
 
     img.src = URL.createObjectURL(file) 
 
     img.onload =() => { 
 
     $("#dvPreview").show() 
 
     $("#dvPreview").append(img) 
 
     } 
 
     img.onerror =() => { 
 
     // the file is not an image 
 
     } 
 
    } 
 
    }) 
 
})

.load { 
 
    width: 20%; 
 
} 
 
#dvPreview { 
 
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
 
    min-height: 400px; 
 
    min-width: 400px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<!-- you are loading multple jquery version!! --> 
 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> --> 
 

 

 
<form method="post"> 
 
    <!-- using accept="image/*" means that you are gona get right format --> 
 
    <input id="fileupload" accept="image/*" type="file" multiple="multitple" class="multi with-preview" /> 
 
    <hr> 
 
    <b>Live Preview</b> 
 
    <br><br> 
 
    <div id="dvPreview"></div> 
 
</form>

Answer 3

です...あなたが実際にFileReaderその後、はるかに簡単ですURL.createObjectURLを使用することができ、それはまた、同期の... をし、ところで、あなたは複数のjqueryのバージョンをロードしていますあなたのスクリプトのインポート行が間違っていたからです。

<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script> 

properbly jquery.MultiFile.jsがロードされていないため、1つの画像プレビューしか表示されませんでした。ブラウザの開発者ツールでエラーが発生しているかどうかを確認できます。

"src"パスをプロジェクト内のスクリプトファイルの実際のファイルパスまたはcdnのURLに置き換えます。ちょうどこのような。

<script src="/Scripts/jquery.MultiFile.js" type="text/javascript" language="javascript"></script> 

あなたがdownloadここからjquery.MultiFile.jsをダウンロードし、それがプロジェクトのスクリプトフォルダにコピーする必要があります。

グッドラック