Question

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

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

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);
});

Answer 1

如果您要将裁剪的图像上传到服务器，那么这就是您必须关注的链接

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

Answer 2

在表单中创建表单并放置文件上传器和上传按钮。

@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");
    }

在上传之前预览图像，然后在asp mvc中上传到服务器

2 个答案: