9

私はMVC4で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 Controlを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を使用）。これはできません。

助けてください

ありがとう。

4

7 に答える 7

44

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"];
        }
于 2014-09-10T14:35:20.387 に答える
10

ファイル（画像）を非同期で投稿する方法は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.");
}

または、 uploadifyなどのswfツールを使用できます

于 2013-01-29T04:54:22.933 に答える
1

私は個人的に、javaスクリプト、css、またはhtml以外のサードパーティツールを使用することを好みません。UmairPが示した最初のアプローチで行きます。しかし、コードの多くを書くために自分自身を惜しまないようにしたい場合。これがjqueryの素晴らしいプラグインです。

また、このプラグインを使用したasp.netmvcのデモもあります。

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

于 2013-01-29T05:36:36.153 に答える
1

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

   <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;
        }
    }
}
于 2013-12-03T12:53:32.617 に答える
1 
$(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);
            }
        });
});
于 2015-07-24T15:42:10.517 に答える
0

私も同様の問題を抱えていて、何日も立ち往生した後、ついにこのリンクが私を助けました

MVCで使用されるプログレスバーを備えたJqueryUploadiy

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

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でさらにファイルを添付する方法を実装する

于 2013-06-25T12:22:45.860 に答える
0 
<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]);
        }
    }
于 2018-08-24T19:06:33.350 に答える