多圖上傳的 append 添加？以及 attr src 的取代？

我寫(xiě)了一個(gè)當(dāng)使用者上傳圖片選擇完之後

$('input[type=file]').change(function() {
      var input = $(this);
      if(!!this.files && !!this.files[0]) {
        var reader = new FileReader();
      reader.onload = function(e) {
          $('#pre' + input.prop('id').substr(4,2)).prop('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });

會(huì)直接反映到 #preXX 裡面直接顯示出來(lái)

<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg">
<img src="" id="pre01" class="">

只是現(xiàn)在遇到一個(gè)問(wèn)題
我現(xiàn)在需要一個(gè) jquery append 的功能
可以添加無(wú)數(shù)個(gè)上傳
但這樣我的 file01 就無(wú)法使用了
請(qǐng)問(wèn)大神，該怎麼處理這個(gè)問(wèn)題？
以及我要增加這個(gè)添加功能
等於是這一坨都要丟到裡面（還有更多）

<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg">
<img src="" id="pre01" class="">

可能會(huì)變這樣：

$("select").append('<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg"><img src="" id="pre01" class="">');

這樣會(huì)是對(duì)的作法嗎？

回答

編輯回答

蔚藍(lán)色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5實(shí)現(xiàn)上傳</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id = "result"></div>
<input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()"/>
<script type="text/javascript">
    var form = new FormData();//通過(guò)HTML表單創(chuàng)建FormData對(duì)象
    var url = '127.0.0.1:8080/'
    function selectFile(){
        var files = document.getElementById('pic').files;
        if(files.length == 0){
            return;
        }
        var file = files[0];
        //把上傳的圖片顯示出來(lái)
        var reader = new FileReader();
        // 將文件以Data URL形式進(jìn)行讀入頁(yè)面
        reader.readAsBinaryString(file);
        reader.onload = function(f){
            var result = $("#result");
            var src = "data:" + file.type + ";base64," + window.btoa(this.result);
            result.append($('<img src ="'+src+'"/>'));
        }
        form.append('file',file);
    }
</script>
</body>
</html>

代碼源自這里，稍作修改，希望可以幫到你

假若需要考慮兼容性，推薦使用插件，如WebUploader，一般的組件庫(kù)都會(huì)包含上傳插件

2018年1月15日 23:49