IT技术 - 如何使用 Javascript/HTML 进行简单的图片上传 - 吾爱随笔录

如何使用 Javascript/HTML 进行简单的图片上传

IT技术 javascript jquery html

2021-02-11 12:37:38

有谁知道如何做一个简单的图片上传并显示在页面上。

这就是我要找的。

用户（我）将选择一个图像
页面将显示图像而不刷新页面或转到另一个文件。
多个<img src>会做，因为我需要显示不同的图像大小。

这是我的代码。（其中一些经过编辑，我是从这里得到的）

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>

4个回答

这是一个没有 jQuery 的简单示例。使用URL.createObjectURL, 其中

创建一个 DOMString 包含表示参数中给定对象的 URL

然后，您可以简单地将src图像的设置为该网址：

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');
          img.onload = () => {
              URL.revokeObjectURL(img.src);  // no longer needed, free memory
          }

          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
      }
  });
});

<input type='file' />
<br><img id="myImg" src="#">

更好的做法是在图像上设置源之前附加 onload 事件侦听器。

2021-03-28 12:37:38

也适用于 react 和非常简单的解决方案

2021-04-09 12:37:38

试试这个，它支持多文件上传，

$('#multi_file_upload').change(function(e) {
    var file_id = e.target.id;

    var file_name_arr = new Array();
    var process_path = site_url + 'public/uploads/';

    for (i = 0; i < $("#" + file_id).prop("files").length; i++) {

        var form_data = new FormData();
        var file_data = $("#" + file_id).prop("files")[i];
        form_data.append("file_name", file_data);

        if (check_multifile_logo($("#" + file_id).prop("files")[i]['name'])) {
            $.ajax({
                //url         :   site_url + "inc/upload_image.php?width=96&height=60&show_small=1",
                url: site_url + "inc/upload_contact_info.php",
                cache: false,
                contentType: false,
                processData: false,
                async: false,
                data: form_data,
                type: 'post',
                success: function(data) {
                    // display image
                }
            });
        } else {
            $("#" + html_div).html('');
            alert('We only accept JPG, JPEG, PNG, GIF and BMP files');
        }

    }
});

function check_multifile_logo(file) {
    var extension = file.substr((file.lastIndexOf('.') + 1))
    if (extension === 'jpg' || extension === 'jpeg' || extension === 'gif' || extension === 'png' || extension === 'bmp') {
        return true;
    } else {
        return false;
    }
}

这里#multi_file_upload 是图片上传字段的ID。

@HBKautil，其余的代码在哪里？HTML 部分在哪里？

2021-03-16 12:37:38

谢谢你，但我需要一个 Javascript 代码，而不是 PHP。

2021-03-23 12:37:38

这很荒谬，但是，我不知道如何使用您发布的代码。哈哈！但我只会努力。

2021-04-03 12:37:38

我只需要以不同尺寸显示 4 倍图像，我只是遇到了问题，src但谢谢你。我稍后会尝试这个。:D

2021-04-06 12:37:38

您可以从 ajax 调用返回图像。在我的例子中，upload_contact_info.php。因此，您将在 ajax 响应中获得图像名称，然后您需要创建动态图像。这就对了。

2021-04-11 12:37:38

<img id="output_image" height=50px width=50px\
<input type="file" accept="image/*" onchange="preview_image(event)">

<script type"text/javascript">
  function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output_image');
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }
</script>

请在您的答案中添加解释，说明此代码的工作原理和方式。纯代码答案不是很有用，可能会导致货物崇拜编程。

2021-04-06 12:37:38

<li class="list-group-item active"><h5>Feaured Image</h5></li>
            <li class="list-group-item">
                <div class="input-group mb-3">
                    <div class="custom-file ">
                        <input type="file"  class="custom-file-input" name="thumbnail" id="thumbnail">
                        <label class="custom-file-label" for="thumbnail">Choose file</label>
                    </div>
                </div>
                <div class="img-thumbnail  text-center">
                    <img src="@if(isset($product)) {{asset('storage/'.$product->thumbnail)}} @else {{asset('images/no-thumbnail.jpeg')}} @endif" id="imgthumbnail" class="img-fluid" alt="">
                </div>
            </li>
<script>
$(function(){
$('#thumbnail').on('change', function() {
    var file = $(this).get(0).files;
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.addEventListener("load", function(e) {
    var image = e.target.result;
$("#imgthumbnail").attr('src', image);
});
});
}
</script>

请解释为什么您的答案比现有答案更有帮助。此外，尽量避免一般的仅代码答案。

2021-04-02 12:37:38

其它你可能感兴趣的问题

上一篇如何跨域使用 window.postMessage？下一篇观察 JavaScript 中的对象属性变化