vb.net 上传带有标题和描述的图像从 jQuery (blueimp / jQuery-File-Upload) 获取值答案

【问题标题】：vb.net upload images with title and description get values from jQuery (blueimp / jQuery-File-Upload)vb.net 上传带有标题和描述的图像从 jQuery (blueimp / jQuery-File-Upload) 获取值
【发布时间】：2022-01-03 03:58:53
【问题描述】：

全部。
（可下载项目代码Upload Images with Title and Description (vb.net)
源自“blueimp/jQuery-File-Upload”)
我正在处理这个带有一些文本字段的图像上传项目，以将它们的值插入数据库。
上面的工作示例没有数据库。
上传带有标题和说明的图片。
加载图像时，这些字段会显示在页面上。
但是，它们在上传时会复制所有图像上的值，因为我不确定处理填充字段的列表。

在项目中，WebForm1.aspx，在模板上传部分。
144-149 行
我为上传图像时显示的字段添加了以下内容。在 asp classic 中，我们将向字段 ID 添加一个数字或字段标识符以传递给我们的代码隐藏。但是，我不确定如何在这里添加它。我可以将图像名称添加到 id，因为它会随着添加的每个图像而改变。但我无法让它发挥作用。

<td>
<input type ="text" name="ImageTitle" id="ImageTitle" value="Give Image a Title" />
</td>
<td>
<input type ="text" name="ImageDesc" id="ImageDesc" value="Give Image a Description" />
</td>

在 UploaderOne.ashx.vb 第 15、16 和 20 行

  15     Dim ImageTitle As String = context.Request.Form("ImageTitle")
  16     Dim ImageDesc As String = context.Request.Form("ImageDesc")
  20     .Name = file.FileName + " - " + ImageTitle + " - " + ImageDesc,

第 20 行，我将 ImageTitle 和 ImageDesc 添加到输出中，以确保我从字段中获得一些回报。接下来，我需要处理我不确定的数组。

我找到了这个帖子Adding Title field to each individual file by Jquery File Upload?
我正在查看它以及作者目前提供的链接。希望我能从中得到我需要的东西。

【问题讨论】：

标签： asp.net vb.net jquery-file-upload blueimp

【解决方案1】：

更新和工作

将 WebForm1.aspx 中的代码更新为以下内容。
主要关注这些线。

  <td class="title">input type ="text" name="ImageTitle[]">  
  <td class="desc">input type ="text" name="ImageDesc[]">

如前所述，每个都有一个类，然后将 [] 添加到名称中。

    <td class="title">
            <input type ="text" name="ImageTitle[]" id="ImageTitle" value="Give Image a Title"  required/>
    </td>
    <td class="desc">
            <input type ="text" name="ImageDesc[]" id="ImageDesc" value="Give Image a Description"  required/>
    </td>

然后将其添加到正文的最底部。

    <script type="text/javascript">
        $('#fileupload').bind('fileuploadsubmit', function (e, data) {
            var inputs = data.context.find(':input');
            if (inputs.filter(function () {
                return !this.value && $(this).prop('required');
            }).first().focus().length) {
                data.context.find('button').prop('disabled', false);
                return false;
            }
            data.formData = inputs.serializeArray();
        });
    </script>

在 UploadOne.ashx.vb.

   Dim ImageTitle As String = context.Request.Form("ImageTitle[]")
   Dim ImageDesc As String = context.Request.Form("ImageDesc[]")

并进行了测试，它有效！每个字段代表每张上传的图片，就像一个魅力。

【讨论】：