如何将图像从文件发送到控制器

时间:2015-11-06 12:53:57

标签: javascript jquery asp.net-mvc image asp.net-mvc-4

我正在使用MVC4,我正在使用文件类型

<input type="file" style="height:25px;width:250px;font-style:normal" name="Image" value=" " data-bind="value: applicationiconlogo" id="txtapplicationiconlogo" />

我正在尝试传递图像路径的HTTP Get调用 使用File.ReallBytes(img path)并传递字节数组以插入数组。

如果appserver位于不同的位置,我很震惊,如果客户端在不同的机器上,我如何通过控制器中的路径访问该文件。

任何人都可以建议如何将图像从js文件传递给控制器​​。

这是我的jquery代码:

    try {
        var action = "/" + NMCApp.getVirtualDirectoryName() + "/PlatformUtilities/AddNHID?&partnerUID=" + model.partner() + "&description=" + model.applicationDescription() +
            "&urlScheme=" + model.applicationzeroconfigURLscheme() + "&applicationName=" + model.applicationName() + "&image=" + model.applicationiconlogo() +
            "&status=" + model.applicationStatus();

        $.ajax({
            url: action,
            async: true,
            success: function (data /*, textStatus, request*/) {
                try {

                    addNHIDTab.close();
                }
                catch (error) {
                    NMCApp.showNMCExceptionWindow('Jquery Error:' + error);
                }
            },
            error: function (request /*, status, error*/) {
                SysErr.logMessage("NHID Details: Error occured while saving NHID details.");
                NMCApp.handleNMCException(request.responseText);
            }
        });
    }
    catch (error) {
        NMCApp.showNMCExceptionWindow('Jquery Error:' + error);
    }

是否可以从客户端(js文件)的路径获取图像并转换为bytes / base64字符串并传递给控制器​​。

1 个答案:

答案 0 :(得分:0)

我尝试了以下的东西,但它确实有效。

这是我的观点:

@model NMC.Plugin.Platform.Models.NHIDModel
@using NMC.Common;
@using System.Web.Mvc.Html;
@using System.Web.Mvc;
@using Res = NMC.Plugin.Platform.Resources;

@{
    Layout = "~/Views/Shared/NMCChildView.cshtml";
    NMCSession session = (NMC.Common.NMCSession)Session["NMCSession"];
}

@section Header {
    <script src="~/Scripts/Platform/Utilities/NHIDDetails.js" type="text/javascript"></script>

    <script type="text/javascript">
        var detailsNHID = new DetailsNHID();
        var NHIDDetailsLoadedFirstTime = true;
        function SaveNHIDDetailsComplete() {
            try {
                if (NHIDDetailsLoadedFirstTime == true) {
                    NHIDDetailsLoadedFirstTime = false;
                    return;
                }
                if ($("#iframeNHIDDetails").length != 0) {
                    var response = $($("#iframeNHIDDetails")[0].contentWindow.document.body.children['jsonResult']).text().trim();
                    var resultData = $.parseJSON(response);
                    if (typeof resultData.IsCustomError !== 'undefined') {
                        NMCApp.handleNMCException(response);
                    }
                    else {
                        detailsNHID.handleSaveCallback(resultData);
                    }
                }
            }
            catch (error) {
                NMCApp.showNMCExceptionWindow(error);
            }
        }
    </script>
}

<div class="nmc-tabheader">
    @if (Model.IsNew) { 
        @Res.Utilities.AddNHID
    }
    else
    {
      @Res.Utilities.DetailsNHID 
    }

</div>
@using (Html.BeginForm("SaveNHID", "PlatformUtilities", FormMethod.Post,
                    new
                    {
                        enctype = "multipart/form-data",
                        id = "NHIDDetailsForm",
                        name = "NHIDDetailsForm",
                        target = "iframeNHIDDetails"
                    }))
                {
<fieldset class="search-fieldset" style="width:950px">
    @Html.HiddenFor(m => m.IsNew)
    @Html.HiddenFor(m=>m.ApplicationGuid)
    <div class="nmc-largetab" style="width:910px;margin:5px 5px 0px 5px !important;">
        <div class="nmc-lefttab" style="width:220px">
            <label class="nmc-label">@Res.Utilities.ApplicationName</label>
        </div>
        <div class="nmc-righttab" style="width:250px">
            @Html.NMCTextBoxFor(m => m.ApplicationName, new { id = "txtapplicationName",maxlength = 50, style = "width:245px", @class = "nmc-text", data_bind = "value:applicationName,valueUpdate: 'input'" }, false)
        </div>
        <div class="nmc-lefttab" style="width:150px">
            <label class="nmc-label">@Res.Utilities.Partner</label>
        </div>
        <div class="nmc-righttab" style="width:250px">
            @Html.DropDownListFor(m => m.PartnerGuid, new SelectList(Model.Partners, "Code", "Name"), new { id = "txtpartnernames", @class = "nmc-select", data_bind = "value:partner,valueUpdate: 'input'", })
        </div>
    </div>
    <div class="nmc-largetab" style="width:910px;margin:5px 5px 0px 5px !important;">
        <div class="nmc-lefttab" style="width:220px"><label class="nmc-label">@Res.Utilities.ApplicationDescription</label></div>
        <div class="nmc-righttab" style="width:250px">
            @Html.NMCTextBoxFor(m => m.ApplicationDescription, new { id = "txtapplicationDescription",maxlength = 4000, style = "width:245px", @class = "nmc-text", data_bind = "value:applicationDescription,valueUpdate: 'input'" }, false)
        </div>
        <div class="nmc-lefttab" style="width:150px"><label class="nmc-label">@Res.Utilities.Applicationiconlogo</label></div>
        @if (Model.IsNew)
        {
            <div class="nmc-righttab" style="width:250px">
            <input type="file" style="height:25px;width:250px;font-style:normal" name="logoImage" value=" " data-bind="value: applicationiconlogo" id="txtapplicationiconlogo" />
            </div>
        }
        else
        { 
        <div class="nmc-righttab" style="width:250px">

            <input type="image"  id="image64string"style="border-radius:5px;border:1px solid #c2bdbd;float:left" src="data:image/png;base64,@Model.ApplicationiconLogo" width="30" height="30" />
            <input class="btn btn-primary nmc-button" type="button" value="Change" data-bind="click:enableEidtImage,visible:showChangeImgBtn" style="margin-bottom:22px;float:left" />
            <input type="file" style="height:25px;width:215px;font-style:normal;float:left;margin-top:3px;margin-left:5px" name="logoImage" data-bind="value: applicationiconlogo,visible:editImage" id="txtapplicationiconlogo" />
        </div>
        @Html.HiddenFor(m => m.ApplicationiconLogo)
        }
    </div>
    <div class="nmc-largetab" style="width:910px;margin:5px 5px 0px 5px !important;">
        <div class="nmc-lefttab" style="width:220px"><label class="nmc-label">@Res.Utilities.ApplicationzeroconfigURLscheme</label></div>
        <div class="nmc-righttab" style="width:250px">
            @Html.NMCTextBoxFor(m => m.ApplicationzeroconfigURLscheme, new { id = "txtapplicationzeroconfigURLscheme", maxlength = 255, style = "width:245px", @class = "nmc-text", data_bind = "value:applicationzeroconfigURLscheme,valueUpdate: 'input'" }, false)
        </div>
        <div class="nmc-lefttab" style="width:150px"><label class="nmc-label"></label>@Res.Utilities.ApplicationStatus</div>
        <div class="nmc-righttab" style="width:250px">
        @Html.NMCDropDownListFor(m => m.Status, new SelectList(Model.GetAllStatus(), "Value", "Text"), new { id = "applicationStatus", @class = "nmc-select", data_bind = "value:applicationStatus" }, false)</div>
    </div>
    <div class="nmc-largetab" style="width:910px;margin:5px 5px 0px 5px !important;visibility:hidden">
        <div class="nmc-lefttab" style="width:220px"><label class="nmc-label">@Res.Utilities.AppStoreURLs</label></div>
        <div data-bind="value:applicationStatus" class="nmc-righttab" style="width:250px">
            <input class="nmc-text" type="text" style="width:250px;" id="txtappStoreURLs" data-bind="value: appStoreURLs" />
        </div>
    </div>
    <div class="nmc-largetab" style="width:900px;margin-top:10px;text-align:center">
        <input type="submit" class="btn nmc-button" value="@Res.CommonStrings.Save" data-bind="click: saveNHID,enable: canSaveNHID,css: { 'btn-primary': (canSaveNHID() == true) }" />
        <input type="button" class="btn btn-primary nmc-button" value="@Res.CommonStrings.Cancel" data-bind="click:closeNHID" />
    </div>
</fieldset>
}
<iframe id="iframeNHIDDetails" name="iframeNHIDDetails" onload="SaveNHIDDetailsComplete();" style="position: absolute; left: -999em; top: -999em;"></iframe>

这是我的控制器代码:

[HttpPost]
public async Task<WrappedJsonResult> SaveNHID(NHIDModel model, HttpPostedFileBase logoImage)
        {
}