Отправка файла типа на контроллер в HTTPPostedFileBase - PullRequest
Новая
       4

Отправка файла типа на контроллер в HTTPPostedFileBase

0 голосов
/ 13 октября 2018

У меня есть сайт, на который я хочу отправить несколько сообщений для себя.

У меня проблема с публикацией фотографии.Я хочу отправить файл фотографии, который пользователь загружает на контроллер с помощью 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"). вал ()).Это мой файл фотографии.Эта функция относится к контроллеру 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; }}

Посмотрите на последнее свойство в модели. Это для фотографированияи сохраняя его.

Теперь посмотрите код моего контроллера:

Первое действие - отправить полные данные, полученные от пользователя, в базу данных и сохранить изображение на сервере 

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

1 Ответ

0 голосов
/ 15 октября 2018

Использование функции FormData () Js. После этого эта форма data передается вашим ajax.Может быть, это поможет вам.

    var formData = new FormData();
    formData.append("File", document.getElementById("BlogImage").files[0]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...