Question

实际上我将图片加载到服务器上。但是一旦我们这样做，页面就会刷新。 我的目标是在不刷新页面的情况下执行此操作。 我该怎么做？有人可以提供帮助吗？在下面的代码中，我在表单中写了onsubmit = "return false"。但是图片没有上传到服务器，因为页面没有以这种方式刷新。

查看

@using (Html.BeginForm("create_conference", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "registerFormValidation", onsubmit = "return false" }))
{
    <div class="form-group">
        <div class="input-group">
            <span class="btn btn-default btn-wd btn-info btn-fill btn-file input-group-addon">
                <i class="fa fa-image"></i> <input type="file" name="file" id="imgInp" accept="image/*">
            </span>
            <input type="text" class="form-control" readonly id="image-path" value="">
        </div>
    </div>
    <div id="enter-room-name">
        <div class="form-group">
            <input type="text" placeholder="Enter Name of Room" class="form-control" required="true" id="room-name" autocomplete="false" style="text-transform:uppercase">
        </div>
        <button type="submit" name="add-room-submit" class="btn btn-info btn-round  btn-wd">Save</button>
    </div>
}

CONTROLLER

[HttpPost]
public ActionResult create_conference(HttpPostedFileBase file)
{
    var path = "";
    if (file != null)
    {
        if (file.ContentLength > 0)
        {
            //for checking uploaded file is image or not
            if(Path.GetExtension(file.FileName).ToLower()==".jpg"
                || Path.GetExtension(file.FileName).ToLower()==".png"
                || Path.GetExtension(file.FileName).ToLower()==".gif"
                || Path.GetExtension(file.FileName).ToLower()==".jpeg")
            {
                path = Path.Combine(Server.MapPath("~/assets/img/conference-img"), file.FileName);
                file.SaveAs(path);
                ViewBag.UploadSuccess = true;
            }
        }
    }
    return View();
    //return Redirect("rooms"); 
}

Answer 1

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

一个好主意是没有尝试在javascript中指定方法/ 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

Answer 2

转换为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);
        }
    });

确保文件名发送。

Answer 3

您可以使用iframe上传图片，使用iframe和ajax图片将上传而不刷新页面。您可以尝试使用我的样本。 HTML：

<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>

这是我的JS：

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

对于服务器端，您可以使用简单的Ajax方法或自定义方法。如果您使用ajax方法，则操作将为action="javascript:submitForm();"，如果您使用自定义方法，则可以使用您的函数名称。

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

3 个答案: