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

时间:2018-10-13 10:17:39

标签: javascript jquery asp.net ajax asp.net-mvc

我有一个网站,希望自己发送一些帖子。

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

请参阅“我的HTML代码”:

Teacher = Object.create(Person);

当用户输入他所有的信息(最著名的是照片)时,单击带有Onclick =“ AddPostBlog();”的按钮。点击。

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

这是我的功能:

<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>

检查最新的JSON文件对象(文件:$(“#BlogImage”)。val())。那是我的照片文件。 此功能称为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);
    }
});

查看模型中的最新属性,用于拍照并保存。

现在请参阅“我的控制器代码”:

  

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

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

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

  

注意:我的主要问题:照片的地址已发送到控制器,但照片本身未发送

这是我的控制器代码UploadImage:

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

    }
  

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

1 个答案:

答案 0 :(得分:0)

使用FormData()Js函数。此后,由ajax传递此formData。可能对您有帮助。

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