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

发布于 2022-09-07 16:02:57 字数 1096 浏览 8 评论 0

我寫了一個當使用者上傳圖片選擇完之後

$('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]);
    }
  });

會直接反映到 #preXX 裡面直接顯示出來

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

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

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

可能會變這樣：

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

這樣會是對的作法嗎？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮凉 2022-09-14 16:02:57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5实现上传</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();//通过HTML表单创建FormData对象
    var url = '127.0.0.1:8080/'
    function selectFile(){
        var files = document.getElementById('pic').files;
        if(files.length == 0){
            return;
        }
        var file = files[0];
        //把上传的图片显示出来
        var reader = new FileReader();
        // 将文件以Data URL形式进行读入页面
        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，一般的组件库都会包含上传插件

回复收藏 0

~没有更多了~