时间戳

首页 > 解决方案 > 将类型文件发送到 HTTPPostedFileBase 中的控制器

javascript - 将类型文件发送到 HTTPPostedFileBase 中的控制器

问题描述

我有一个网站，我想为自己发送一些帖子。

我在发布照片帖子时遇到问题。我想使用 Jquery Ajax 将用户上传的照片文件发送到控制器，但这不会发生。

请参阅我的 HTML 代码：

<div class="col-sm-12">
    <div class="card">
        <div class="card-header">
            <strong>ثبت خبر جدید</strong>
        </div>
        <div class="card-block">
            <div class="row">
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="BlogTitle">سر تیتر خبر</label>
                        <input type="text" class="form-control" id="BlogTitle" placeholder="سر تیتر خبر : مثال تخفیف بر روی تمامی سرویس ها">
                    </div>
                    <div class="col-md-6">
                        <label for="BlogShortDesc">متن کوتاه خبر</label>
                        <input type="text" class="form-control" id="BlogShortDesc" placeholder="به اندازه 110 کاراکتر متن کوتاه وارد کنید">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="BlogLongDesc">متن اصلی خبر</label>
                <textarea class="form-control" id="BlogLongDesc" rows="10" placeholder="متن اصلی خبر خود را وارد کنید"></textarea>
            </div>
            <div class="form-group row">
                <div class="col-md-4">
                    <label for="BlogView">آیا پست نمایش داده شود ؟</label>
                    <label class="switch switch-icon switch-pill switch-success">
                        <input type="checkbox" class="switch-input" id="BlogView" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
                <div class="col-md-4">
                    <label for="BlogFire">آیا خبر مهم است ؟</label>
                    <label class="switch switch-icon switch-pill switch-success">
                        <input type="checkbox" class="switch-input" id="BlogFire">
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
                <div class="col-md-4">
                    <label for="BlogCommentEnable">آیا برای این خبر کامنت باز باشد ؟</label>
                    <label class="switch switch-icon switch-pill switch-success">
                        <input type="checkbox" class="switch-input" id="BlogCommentEnable">
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4">
                    <label for="BlogDatePublish">تاریخ ارسال خبر</label>
                    @*<div>
                            <label id="BlogDatePublish"><small class="text-success">برای انتخاب تاریخ بر روی من کلیک کنید</small></label>
                        </div>*@
                    <input type="text" class="form-control" id="BlogDatePublish" placeholder="*** تاریخی که کاربر خواهد دید ***">
                </div>
                <div class="form-group col-sm-8">
                    <label for="BlogImage">عکس اصلی خبر</label>
                    <input type="file" class="form-control" id="BlogImage">
                </div>
            </div>

            <div class="row">
                <div class="form-group col-sm-6">
                    <label for="BlogReview">تعداد بازدید پیشفرض خبر</label>
                    <input type="text" class="form-control" id="BlogReview" placeholder="این روش پیشنهاد نمی شود.">
                </div>
                <div class="form-group col-sm-6">
                    <label for="BlogPublisher">ارسال کننده خبر</label>
                    <select class="form-control" id="BlogPublisher">
                        <option>توسط Ajax مقدار دهی می شود.</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-sm-4">
                    <label for="PostCategory1">دسته بندی سطح اول خبر</label>
                    <select class="form-control" id="PostCategory1">
                        <option>توسط Ajax مقدار دهی می شود.</option>
                    </select>
                </div>
                <div class="form-group col-sm-4">
                    <label for="PostCategory2">دسته بندی سطح دوم خبر</label>
                    <select class="form-control" id="PostCategory2">
                        <option>توسط Ajax مقدار دهی می شود.</option>
                    </select>
                </div>

                <div class="form-group col-sm-4">
                    <label for="PostCategory3">دسته بندی سطح سوم خبر</label>
                    <select class="form-control" id="PostCategory3">
                        <option>توسط Ajax مقدار دهی می شود.</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-md-12">
                    <label for="tags">تگ های خبر را وارد کنید</label>
                    <input type="text" class="form-control" name="tags" id="tags">
                    <label><small class="text-info">نکته : تگ ها را میتوانید با Enter یا Comma از یکدیگر جدا کنید و با BackSpace یا x آنها را پاک کنید.</small></label>
                </div>
            </div>

            @*<div class="row">
                    <div class="form-group col-sm-12">
                        <label for="tagBox">تگ های خبر را وارد کنید</label>
                        <div data-tags-input-name="tag" id="tagBox">
                            Start
                        </div>
                    </div>
                    <label><small class="text-warning">نکته : تگ ها را میتوانید با Enter یا Space از یکدیگر جدا کنید و با BackSpace و Delete آنها را پاک کنید.</small></label>
                </div>*@

        </div>
        <div class="card-footer">
            <a href="@Url.Action("BlogList","Dashboard")" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> انصراف</a>
            <button type="button" class="btn btn-sm btn-primary" onclick="AddPostBlog();"><i class="fa fa-dot-circle-o"></i> ثبت خبر</button>
        </div>
    </div>
    <div id="blogimageShow">

    </div>
</div>

当用户输入他的所有信息（最明显的是照片）时，单击带有 Onclick="AddPostBlog();" 的按钮 点击。

单击按钮时，将调用一个函数。

这是我的功能：

function AddPostBlog() {

var myAdminBlog = {
    BlogTitle: $("#BlogTitle").val(),
    BlogShortDesc: $("#BlogShortDesc").val(),
    BlogLongDesc: $("#BlogLongDesc").val(),
    BlogView: CheckBlogView(),
    BlogFire: CheckBlogFire(),
    BlogCommentEnable: CheckBlogCommentEnable(),
    BlogDatePublish: $("#BlogDatePublish").val(),
    BlogImage: $("#BlogImage").val(),
    BlogReview: $("#BlogReview").val(),
    BlogPublisher: $("#BlogPublisher").val(),
    PostCategory3: $("#PostCategory3").val(),
    BlogKeywords: $("#tags").val(),
    File: $("#BlogImage").val()
};

$.ajax({
    url: 'AddPostBlog',
    data: JSON.stringify(myAdminBlog),
    type: "POST",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (data) {
        alert(data);
    },
    error: function (errormessage) {
        alert(errormessage);
    }
});

检查最新的 JSON 文件对象（文件：$("#BlogImage").val()）。那是我的照片文件。这个函数被引用到 AddPostBlog 控制器。

在看控制器代码之前，先看看我的模型代码。

 public class csAdminBlog
{
    public int BlogID { get; set; }

    public string BlogTitle { get; set; }

    public string BlogShortDesc { get; set; }

    public string BlogLongDesc { get; set; }

    public string BlogDatePublish { get; set; }

    public string BlogImage { get; set; }

    public bool BlogView { get; set; }

    public bool BlogFire { get; set; }

    public int BlogRate { get; set; }

    public int BlogReview { get; set; }

    public bool BlogCommentEnable { get; set; }

    public string BlogKeywords { get; set; }

    public int BlogCategory3ID { get; set; }

    public string BlogCategory3Title { get; set; }

    public bool BlogCategory3View { get; set; }

    public int BlogCategory2ID { get; set; }

    public string BlogCategory2Title { get; set; }

    public bool BlogCategory2View { get; set; }

    public int BlogCategory1ID { get; set; }

    public string BlogCategory1Title { get; set; }

    public bool BlogCategory1View { get; set; }

    public int UserID { get; set; }

    public string UserName { get; set; }

    [DataType(DataType.Upload)]
    public HttpPostedFileBase File { get; set; }}

查看模型中最新的Property。它是用来拍照和保存的。

现在查看我的控制器代码：

第一个动作是将用户收到的完整数据发送到数据库并将图像保存在服务器上

public JsonResult AddPostBlog(csAdminBlog myAdminBlog)
    {
        csAdminBlog PublicAdminBlog = new csAdminBlog();
        string Message = string.Empty;
        int UploadMessage = UploadImage(myAdminBlog);
        if (UploadMessage == 3)
        {
            int Ret = PublicAdminBlog.AddPostBlog(myAdminBlog);
            if (Ret == 1)
            {
                Message = "پست با موفقیت ثبت شد و با موفقیت به نمایش در آمد.";
            }
            else if (Ret == 2)
            {
                Message = "پست با موفقیت ثبت شد. برای به نمایش درآمدن, پست را ادیت کنید.";
            }
            else
            {
                Message = "مشکلی پیش آمده است. لطفا بعدا تلاش فرمایید.";
            }
            return Json(Message, JsonRequestBehavior.AllowGet);
        }
        else if(UploadMessage == 1)
        {
            return Json("فایل ارسالی شما مخرب یا نادرست است.",JsonRequestBehavior.AllowGet);
        }
        else if (UploadMessage == 2)
        {
            return Json("پسوند فایل شما نادرست است. فقط پسوند های PNG / Jpeg / Gif قابل قبول است.", JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json("مشکلی در آپلود فایل پیش آمده است.", JsonRequestBehavior.AllowGet);
        }

    }

现在让我们看一下第二个控制器代码，它接收照片并将其保存在服务器上

注意：我的主要问题：照片的地址发送到控制器，但照片本身没有发送

这是我的控制器代码 UploadImage ：

public int UploadImage(csAdminBlog myAdminBlog)
    {

        string[] ValidImageTypes = new string[]
        {
            "image/gif",
            "image/png",
            "image/jpeg",
            "image/jpg",
            "image/pjpeg"
        };

        try
        {
            if (myAdminBlog.File == null || myAdminBlog.File.ContentLength == 0)
            {
                return 1;
            }
            else if (!ValidImageTypes.Contains(myAdminBlog.File.ContentType))
            {
                return 2;
            }

            if (myAdminBlog.File != null && myAdminBlog.File.ContentLength > 0)
            {
                myAdminBlog.File.SaveAs(Path.Combine(Server.MapPath(ExynosCRUD.PathBlog), myAdminBlog.File.FileName));
                myAdminBlog.BlogImage = Path.Combine(Server.MapPath(ExynosCRUD.PathBlog), myAdminBlog.File.FileName);
                return 3;
            }
            else
            {
                return 4;
            }


        }
        catch (Exception Err)
        {
            throw;
        }
    }

最后，告诉我为什么照片没有发送到所需的属性，并且它的数据为 Null

标签： javascriptjqueryasp.netajaxasp.net-mvc

解决方案

使用 FormData() Js 函数。之后通过你的 ajax 传递这个 formData。可能这对你有帮助。 

    var formData = new FormData();
    formData.append("File", document.getElementById("BlogImage").files[0]);

推荐阅读