Jquery 多个图像上传工作，但只有一次_Jquery_Ajax_Asp.net Mvc

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

jquery ajax asp.net-mvc

Jquery 多个图像上传工作，但只有一次,jquery,ajax,asp.net-mvc,Jquery,Ajax,Asp.net Mvc,我有一个局部视图来查看上传后的图像，如下所示： @model IEnumerable<WebApplication1.Model.Image> @using MvcApplication1.Models <div id="divImages"> <input type="file" id="FileUpload" multiple /> <input type="submit" id="Upload" value="Up

我有一个局部视图来查看上传后的图像，如下所示：

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

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

最后，我的

All（）

函数：

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

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

和编辑视图：

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

@model WebApplication1.model.Product
@使用mvcapapplication1.Models
@{
ViewBag.Title=“编辑”；
}
编辑
















@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@Html.HiddenFor（model=>model.id\u产品）
@{Html.RenderAction（“所有”、“产品”，新的{id=Model.id_product}）；}
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
}
$（“#制表符”）.tabs（）；
$（文档）.ready（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
url:“/Products/UploadFiles”，
自动上传：对，
完成：功能（e，数据）{
$（'.file_name'）.html（data.result.name）；
$（'.file_type'）.html（data.result.type）；
$（'.file_size'）.html（data.result.size）；
}
}).on（'fileuploadprogressall'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'.progress.progress bar'）.css（'width'，progress+'%'）；
});
});

现在，上传和刷新部分视图一切都很好。除了成功上传后，当我想上传另一张图片时，上传按钮不起作用

我希望有人知道原因。

从主视图中删除以下部分后，问题得到解决。感谢Stephen Muecke

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


$（文档）.ready（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
url:“/Products/UploadFiles”，
自动上传：对，
完成：功能（e，数据）{
$（'.file_name'）.html（data.result.name）；
$（'.file_type'）.html（data.result.type）；
$（'.file_size'）.html（data.result.size）；
}
}).on（'fileuploadprogressall'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'.progress.progress bar'）.css（'width'，progress+'%'）；
});
});

从主视图中删除以下部分后，问题已解决。感谢Stephen Muecke

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


$（文档）.ready（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
url:“/Products/UploadFiles”，
自动上传：对，
完成：功能（e，数据）{
$（'.file_name'）.html（data.result.name）；
$（'.file_type'）.html（data.result.type）；
$（'.file_size'）.html（data.result.size）；
}
}).on（'fileuploadprogressall'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'.progress.progress bar'）.css（'width'，progress+'%'）；
});
});

要共享的错误消息？检查浏览器上的控制台“上载按钮”是什么意思不起作用？我想你的意思是它仍然可以单击，但是没有调用你的操作方法。在这种情况下，你的jQuery可能会出现问题。上传文件后还要检查控制台是否有错误。@MartinMazzaDawson你说得对。控制台中没有错误。你的元素在哪里有

“#divImages”

在视图中。如果返回的部分视图包含“上载”提交按钮，则需要使用事件委派。并且使用ajax和ajax调用不会重定向，因此使用

return RedirectToAction（“All”，new{id=model}）；

没有意义。如果要返回所有图像，您应该只返回刚刚保存的图像，然后更新现有表（作为部分视图或包含图像路径集合的json）。要共享任何错误消息吗？请检查浏览器上的控制台“上载按钮”是什么意思不起作用？我想你的意思是它仍然可以单击，但是没有调用你的操作方法。在这种情况下，你的jQuery可能会出现问题。上传文件后还要检查控制台是否有错误。@MartinMazzaDawson你说得对。控制台中没有错误。你的元素在哪里有

“#divImages”

在视图中。如果返回的部分视图包含“上载”提交按钮，则需要使用事件委派。并且使用ajax和ajax调用不会重定向，因此使用

return RedirectToAction（“All”，new{id=model}）；

没有意义。相反，返回所有图像时，应该只返回刚才保存的图像，然后更新现有表（作为部分视图或包含图像路径集合的json）。