文章/答案/技术大牛

发布

社区首页 >问答首页 >多个图像上传工作，但只有一次

问多个图像上传工作，但只有一次
EN

Stack Overflow用户

提问于 2016-03-17 20:05:42

回答 1查看 278关注 0票数 1

上传图片后，我有一个部分视图，如下所示：

    @model IEnumerable<WebApplication1.Model.Image>
@using MvcApplication1.Models

<div id="divImages">




    <input type="file" id="FileUpload" multiple />
    <input type="submit" id="Upload" value="Upload" />

    <table class="table" id="tble">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.cover)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Product.type)
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.cover)
                </td>
                <td>
                    @Html.Image("/Images/" + item.id_product + "/" + item.id_image + ".jpg", "Image", "50")
                </td>
                <td>
                    @Html.ActionLink("Delete", "Delete", new { id = item.id_image })
                </td>
            </tr>
        }

    </table>
</div>

如下所示的ajax：

<script>
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData($('form').get(0));
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }
            formData.append("Model", @Model.Take(1).Single().id_product);
            $.ajax({
                type: "POST",
                url: '/Products/Upload',
                data: formData,
                //dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                    $.get('@Url.Action("All", "Products")', { id: @Model.Take(1).Single().id_product }, function (data) {
                        $("#divImages").html(data);
                    });
                },
                error: function (error) {
                    alert("errror");
                }
            });
        });
    });

</script>

您可以看到，在通知用户成功上传后，部分视图将被更新。

下面是我的Upload()函数：

    public ActionResult Upload(int model)
    {

        for (int i = 0; i < Request.Files.Count; i++)
        {
            Image p = new Image();
            p.cover = true;
            p.id_product = model;
            db.Images.Add(p);
            db.SaveChanges();
            var ims = db.Images.OrderByDescending(x => x.id_image).Take(1).Single(); 
            var file = Request.Files[i];
            var fileName = ims.id_image.ToString() + ".jpg"; //Path.GetFileName(file.FileName);
            var path = Server.MapPath("~/Images/"+model.ToString()+"/");
            if(this.CreateFolderIfNeeded(path))
                file.SaveAs(path + fileName);
        }


        return RedirectToAction("All", new { id = model }); 
    }

最后，我的All()函数：

    public PartialViewResult All(int id)
    {
        List<Image> model = db.Images.Where(x => x.id_product == id).ToList();
        if (model.Count() == 0)
        {
            Image i = new Image();
            i.id_product = id;
            List<Image> li = new List<Image>();
            li.Add(i);
            return PartialView("_File", li);
        }
        else
            return PartialView("_File", model); 
    }

这是我的Image模型：

namespace WebApplication1.Model
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int id_image { get; set; }
        public int id_product { get; set; }
        public bool cover { get; set; }

        public virtual Product Product { get; set; }
    }
}

编辑视图：

@model WebApplication1.Model.Product
@using MvcApplication1.Models

@{
    ViewBag.Title = "Edit";
}

<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="jquery.fileupload.css" rel="stylesheet" type="text/css" />

    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>


<body>
    <h2>Edit</h2>

    <br />
    <br />


    <div class="form-horizontal">
        <div id="tabs">
            <ul>
                <li>
                    <a href="#fragment-1"><span>Information</span></a>
                </li>
                <li>
                    <a href="#fragment-2"><span>Prices</span></a>
                </li>
                <li>
                    <a href="#fragment-3"><span>SEO</span></a>
                </li>
                <li>
                    <a href="#fragment-4"><span>Associations</span></a>
                </li>
                <li>
                    <a href="#fragment-5"><span>Images</span></a>
                </li>
            </ul>
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.id_product)
                <div id="fragment-1">

                </div>

                <div id="fragment-2">


                </div>

                <div id="fragment-3">


                </div>


            <div id="fragment-4">

            </div>

            <div id="fragment-5">


                    @{ Html.RenderAction("All", "Products", new { id = Model.id_product }); }

            </div>

        </div>
    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
        $("#tabs").tabs();
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '/Products/UploadFiles',
                autoUpload: true,
                done: function (e, data) {
                    $('.file_name').html(data.result.name);
                    $('.file_type').html(data.result.type);
                    $('.file_size').html(data.result.size);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            });
        });
    </script>

</body>

现在，一切运行良好，这是上传和刷新部分视图。除了成功上传后，当我想上传另一个图片，上传按钮不工作。

我希望有人知道原因。

jquery

ajax

asp.net-mvc

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-18 04:02:34

从主视图中移除以下部分后，问题得到解决。感谢斯蒂芬·梅克。

<script type="text/javascript">
        $(document).ready(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '/Products/UploadFiles',
                autoUpload: true,
                done: function (e, data) {
                    $('.file_name').html(data.result.name);
                    $('.file_type').html(data.result.type);
                    $('.file_size').html(data.result.size);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            });
        });
    </script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36070666

复制

相似问题

问多个图像上传工作，但只有一次
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个图像上传工作，但只有一次EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个图像上传工作，但只有一次
EN