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

Hi有一个表，其中一行包含多个图像。若点击任何图片，我需要打开文件上传对话框，将图片上传到文件变量中，但也并没有弹出窗口，上传文件正在工作。您能帮助修复这个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>
}

---

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

而是在单击图像时触发单击事件

将更改事件附加到将进行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: ");
            }
        });
    });
});

---

@梅森非常感谢你。@梅森希望这是Title现在看起来不错。你说什么@曼森哈。。哈你说的对，有什么帮助吗？ajax调用也没有命中我的控制器。我在var file1=$this.file[0]处遇到错误；设置一个调试点，并使用控制台检查出了什么问题？我得到了这个错误吗？中第162行第17列的未处理异常http://localhost:1064/SellereLogin 0x800a138f-Microsoft JScript运行时错误：“file.0”为null或不是对象如果存在此异常的处理程序，程序可能会安全继续。我相信$this.file[0]应该是$this.files[0]；不，不起作用。。由于无法读取属性0:undefined，我仍然收到错误消息。我正在使用var formData=new formData$'form'[0]它没有给出任何错误

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

}

$(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: ");
            }
        });
    });
});