在上传之前预览图像，然后以aspmvc上传到服务器

preview images before upload and then upload into the server in asp mvc

本文关键字：然后 aspmvc 服务器 图像      更新时间：2024-05-02

我制作了一个带有一个输入和一些预览框的表单。当用户选择自己的图像时，图像会正确地加载到预览框中，但提交后我不知道如何将图像框中的图像发送到服务器中。

这是我使用的脚本，用于获取图像并将其加载到客户端图像框中。

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
}
}
    $("#imgInp").change(function(){
    readURL(this);
});

如果你想将裁剪后的图像上传到发球台，那么这是你必须遵循的链接

http://www.aspsnippets.com/Articles/Crop-and-Upload-Image-with-Thumbnail-using-jQuery-and-HTML5-in-ASPNet.aspx

创建一个表单，并将文件上传器和上传按钮放置在表单内。

@using (Html.BeginForm("UploadImage", "Home", FormMethod.Post,new { enctype = "multipart/form-data" }))
 {
   <input type="file" name="file" id="fileUploader" />
   <input type="submit" value="Upload" id="btnFileUpload" />
 }

点击上传按钮后，上传的图像将提交给控制器动作。

控制器代码

    [HttpPost]
    public ActionResult UploadImage(HttpPostedFileBase file)
    {
        if (Request.Files.Count > 0)
        {
            var uploadedfile = Request.Files[0];
            //save file logic
        }
        return RedirectToAction("Index");
    }
相关文章：