web-dev-qa-db-ja.com

ポストバックなしでajaxまたは他の技術を使用してASP.NET MVC 4で画像をアップロードする方法

MVC 4でWebサイトを開発しています。ユーザーがいくつかの情報を入力し、保存してアップロードします。画像を除くすべての情報は、以下に示すように、Javascript、Json、およびAjaxを使用してサーバーに保存されます。

$.ajax({
                    url: action,
                    type: "POST",
                    data: JSON.stringify(PostViewModel),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function () {            
                    },
                    success: function (data) {
                    try{
                        alert('success');
                    }catch(err){alert(' Error: '+err);}

                    },
                    complete: function () {
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("Error occured");
                    }
            });

しかし、今度は彼の画像もアップロードする必要がありますが、このアプローチで機能する方法、またはポストバックなしで機能する方法を見つけることができませんでした。

FileUploadコントロールをFormタグに配置し、送信ボタンを押すと、以下のように画像ファイルを取得できます。

 HttpPostedFileBase photo = Request.Files["photo"];
        if (photo != null)
        {
            Session["ImgPath"] = "~/Content/PostImages/" + photo.FileName;
            string path = Server.MapPath("~/Content/PostImages/");
            photo.SaveAs(path + photo.FileName);
        }

ただし、この方法では、コンテンツを保存する方法（JavaScript、Json、Ajaxを使用）を変更する必要がありますが、変更できません。

助けてください

ありがとう。

c#-4.0file-uploadasp.net-mvc-4
9
user1400290

HTMLコード

<input type="file"  id="uploadEditorImage"  />

JavaScriptコード

$("#uploadEditorImage").change(function () {
    var data = new FormData();
    var files = $("#uploadEditorImage").get(0).files;
    if (files.length > 0) {
        data.append("HelpSectionImages", files[0]);
    }
    $.ajax({
        url: resolveUrl("~/Admin/HelpSection/AddTextEditorImage/"),
        type:"POST",
        processData: false,
        contentType: false,
        data: data,
        success: function (response) {
           //code after success

        },
        error: function (er) {
            alert(er);
        }

    });
});

MVCコントローラーのコード

if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
        {
            var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
        }
40
Shemeemsha R A

ファイル（画像）を非同期で投稿する方法は2つあります。ターゲットのブラウザーがファイルAPIをサポートしている場合は、以下を使用できます。HTML：

<input type="file" name="etlfileToUpload" id="etlfileToUpload"  />

JavaScript

// Call this function on upload button click after user has selected the file 
function UploadFile() {
    var file = document.getElementById('etlfileToUpload').files[0];
    var fileName = file.name;    
    var fd = new FormData();    
    fd.append("fileData", file);    
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) { UploadProgress(evt); }, false);
    xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
    xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
    xhr.addEventListener("abort", function (evt) { UploadCanceled(evt); }, false);
    xhr.open("POST", "{URL}", true); 
    xhr.send(fd);
}


function UploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        $("#uploading").text(percentComplete + "% ");        
    }
}

function UploadComplete(evt) {
    if (evt.target.status == 200)
        alert(evt.target.responseText);
    else {
        alert("Error Uploading File");
    }
}

function UploadFailed(evt) {    
    alert("There was an error attempting to upload the file.");
}

function UploadCanceled(evt) {    
    alert("The upload has been canceled by the user or the browser dropped the connection.");
}

または ploadify のようなswfツールを使用できます

9
UmairP

これを試してみてください

   <input type="file" name="Upload" id="Upload" />

$('#Upload').change(function () {
    debugger;
    var file = document.getElementById('Upload').files[0];
    var fileName = file.name;
    var fd = new FormData();
    fd.append("fileData", file);
    fd.append("key", '@Model.Id');

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) { UploadProgress(evt); }, false);
    xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
    xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
    xhr.addEventListener("abort", function (evt) { UploadCanceled(evt); }, false);
    xhr.open("POST", "/ImageHandler.ashx", true);
    xhr.send(fd);
});


function UploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        //$("#uploading").text(percentComplete + "% ");
    }
}

function UploadComplete(evt) {
    //if (evt.target.status == 200)
        //alert(evt.target.responseText);
    //else {
    //   // alert("Error Uploading File");
    //}
}

function UploadFailed(evt) {
   // alert("There was an error attempting to upload the file.");
}

function UploadCanceled(evt) {
    //alert("The upload has been canceled by the user or the browser dropped the connection.");
}

ハンドラ：

public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");]



        string filePath = Constants.ImageFolderPath;

        //write your handler implementation here.
        if (context.Request.Files.Count <= 0)
        {
            context.Response.Write("No file uploaded");
        }
        else
        {
            for (int i = 0; i < context.Request.Files.Count; ++i)
            {
                HttpPostedFile file = context.Request.Files[i];
                if (context.Request.Form != null)
                {
                    string imageid = context.Request.Form.ToString();
                    imageid = imageid.Substring(imageid.IndexOf('=') + 1);

                    if (file != null)
                    {
                        string ext = file.FileName.Substring(file.FileName.IndexOf('.'));
                        if (ext.ToLower().Contains("gif") || ext.ToLower().Contains("jpg") || ext.ToLower().Contains("jpeg") || ext.ToLower().Contains("png"))
                        {

                            byte[] data;
                            using (Stream inputStream = file.InputStream)
                            {
                                MemoryStream memoryStream = inputStream as MemoryStream;
                                if (memoryStream == null)
                                {
                                    memoryStream = new MemoryStream();
                                    inputStream.CopyTo(memoryStream);
                                }
                                data = memoryStream.ToArray();
                                File.WriteAllBytes(Constants.ImageFolderPath + imageid + ".jpg", (byte[])data);
                                //club.club_image = Convert.ToBase64String(data);
                            }
                        }
                    }
                }
                else
                {

                }

                //file.SaveAs(context.Server.MapPath(filePath + file.FileName));
                context.Response.Write("File uploaded");
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
1
Ankit
$(document).ready(function(){
   var status = $('#status');

        $('#frmUpload').ajaxForm({
            beforeSend: function () {
                if ($("#file").val() != "") {                   
                    $("#progressDiv").show();                    
                }
                status.empty();
            },
            success: function () {
                showTemplateManager();
            },
            complete: function (xhr) {
                if ($("#file").val() != "") {
                    var millisecondsToWait = 500;
                    setTimeout(function () {                       
                     $("#progressDiv").hide();
                    }, millisecondsToWait);
                }
                status.html(xhr.responseText);
            }
        });
});
1
Ace

私は個人的には、Javaスクリプト、css、またはhtml以外のサードパーティ製ツールを使用することを好みません。UmairPが示す最初のアプローチを使用します。多くのコードを書くためにここにjqueryのNice plugin があります。

また、このプラグインを使用したasp.net mvc用の demo もあります。

ぜひご覧ください。さらに情報が必要な場合はお知らせください。

1
kunjee

私も同様の問題を抱えており、何日も行き詰まった後、ようやくこのリンクが役に立ちました

MVCで使用するプログレスバー付きのJquery Uploadiy

これが私が管理した方法です

public JsonResult Upload(HttpPostedFileBase file)
{
    if (Session["myAL"] == null)
    {
        al = new ArrayList();
    }
    else
        al = (ArrayList)Session["myAL"];

    var uploadFile = file;

        if (uploadFile != null && uploadFile.ContentLength > 0)
        {
            string filePath = Path.Combine(HttpContext.Server.MapPath("~/Content/Uploads"),
                                               Path.GetFileName(uploadFile.FileName));                    
            al.Add(filePath);
            Session["myAL"] = al;
            uploadFile.SaveAs(filePath);
        }

    var percentage = default(float);

    if (_totalCount > 0)
    {
        _uploadCount += 1;
        percentage = (_uploadCount / _totalCount) * 100;
    }

    return Json(new
    {
        Percentage = percentage
    });
}

FileUploadingのMVCとjqueryにファイルを追加して実装する方法

0
Zaveed Abbasi
<input type="file" name="file" id="file" style="width: 100%;"onchange="readURL(this);" />

 if (file != null && file.ContentLength > 0)
                {
                    string filename = Path.GetFileName(file.FileName);
                    string imgpath = Path.Combine(Server.MapPath("~/Img/"), filename);
                    file.SaveAs(imgpath);
                    student.photo = imgpath;
                }

function readURL(input)
    {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#imgUser')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
0
Durgesh Rathod