Question

你有一张包含连续多个图像的表格。如果点击任何图像，我需要打开文件上传对话框，并将上传的图像上传到文件变量，但也不弹出，上传文件正在运行。你能帮忙修复这个jQuery吗？

我的观点：

{
<table id="listOfProduct">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Image1Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Image2Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Image3Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Image4Id)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>

                @Html.DisplayFor(modelItem => item.ProductId)

            </td>
            <td>

                @Html.HiddenFor(m => item.Image1Id)
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["prodImage"]" class="click"/>

            </td>
            <td>

                @Html.HiddenFor(m => item.Image2Id)
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["prodImage"]" class="click"/>

            </td>
            <td>

                @Html.HiddenFor(m => item.Image3Id)
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["prodImage"]" class="click"/>

            </td>
            <td>

                @Html.HiddenFor(m => item.Image4Id)
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["prodImage"]" class="click"/>
            </td>
        </tr>
    }

</table>
<div>
    <input type="file" id="file1" style="display: none" />
</div>
}

脚本：

<script>
        $(function () {
            $('.click').on('click', function () {
                $('#file1').on('click').submit(function (e) {
                    debugger;
                    var file1 = $(this).file[0];

                    $.ajax({
                        type: "POST",
                        url: "SellereLogin/uploadProductImage",
                        enctype: 'multipart/form-data',
                        data: {
                            file: file1,
                            productId: 123,
                            imageId: 12345
                        },
                        success: function () {
                            alert("Data Uploaded: ");
                        }
                    });
                });
            });
        });
    </script>

我的控制器：

[HttpPost]
public void uploadProductImage(HttpPostedFileBase file, int productId, int imageId)
{

}

Answer 1

单击图像时，您将click事件绑定到文件上载元素。

在您单击图像时触发点击事件。

将更改事件附加到将进行ajax调用的文件上载。

$(function () {
    $('.click').on('click', function () {
        $('#file1').trigger('click');
    });

    $('#file1').on('change', function (e) {
        debugger;
        var file1 = $(this).file[0];

        $.ajax({
            type: "POST",
            url: "SellereLogin/uploadProductImage",
            enctype: 'multipart/form-data',
            data: {
                file: file1,
                productId: 123,
                imageId: 12345
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

如何使用jQuery自动打开上传文件对话框？

1 个答案: