Javascript 如何在不刷新页面的情况下将图像上载到服务器？

事实上，我将图片加载到服务器上。但一旦我们这样做，页面就会刷新我的目标是在不刷新页面的情况下执行此操作。我如何才能做到这一点？有人能帮忙吗？ 在下面的代码中，我在表单中写入

onsubmit=“return false”

。但是图片不会上传到服务器，因为页面不会以这种方式刷新

看法

---

转换为base64并调用ajax。确保后端在保存之前将其转换回图像文件

我以前用jquery做过

这是重要的部分：

我已经用jquery完成了。这是重要的部分

 $(document).ready(function() {

    $('#imageFile').change(function(evt) {

        var files = evt.target.files;
        var file = files[0];


        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
            // console.log(file.name)
            var filename = file.name
            console.log(filename);
        }
    });

---

确保文件名发送。

您可以使用iframe上传图像，使用iframe和ajax图像将在不刷新页面的情况下上传。 你可以试着用我的样品。 HTML:

---

对于服务器端，您可以使用简单的Ajax方法或自定义方法。如果您使用Ajax方法，则操作将是

action=“javascript:submitForm（）；”

，如果您使用自定义方法，则可以使用您的函数名。

不要使用fileReader或iframe将其读取为base64。。。 只需将表单元素转换为FormData并将其发送到服务器

一个好主意是不要试图在javascript中指定method/url，让它尽可能的通用，让html标记做它想做的事情（定义事情），然后你可以在更多的表单中使用这个函数，如果javascript被禁用，它会得到更优雅的降级

function turnFormToAjax(evt) {
  evt.preventDefault()

  var form = evt.target
  var fd = new FormData(fd)

  fetch(form.target, {method: form.method, body: fd})
    .then(function(res) {
      // done uploading
    })
}

document.querySelector('form').onsubmit = turnFormToAjax

---

我不知道怎么做。你能修改我的代码吗？我已经用jquery完成了。只是一个例子。我相信有一种更好的方法可以做到这一点。这只有在使用jquery时才有效。如果您检查控制台，它应该将其输出到base64。只需更改id，使其与html匹配即可。

 $(document).ready(function() {

    $('#imageFile').change(function(evt) {

        var files = evt.target.files;
        var file = files[0];


        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
            // console.log(file.name)
            var filename = file.name
            console.log(filename);
        }
    });

<form id="registerFormValidation" name="registerFormValidation" action="" method="POST" enctype="multipart/form-data" >

<div id="main">
<input name="imgInp" id="imgInp" size="27" type="file" />
<input type="button" name="action" value="Upload" onclick="upload()"/>
<iframe id='my_iframe' name='my_iframe' src="">
</iframe>
</div>    
</form>

function upload()
{
//'my_iframe' is the name of the iframe
document.getElementById('registerFormValidation').target = 'my_iframe';
document.getElementById('registerFormValidation').submit();
}

function turnFormToAjax(evt) {
  evt.preventDefault()

  var form = evt.target
  var fd = new FormData(fd)

  fetch(form.target, {method: form.method, body: fd})
    .then(function(res) {
      // done uploading
    })
}

document.querySelector('form').onsubmit = turnFormToAjax