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

vb.net upload images with title and description get values from jQuery (blueimp / jQuery-File-Upload)

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

在项目中,WebForm1.aspx,在template-upload部分。
第 144-149 行
我为上传图片时显示的字段添加了以下内容。在 asp 经典中,我们将向字段 ID 添加一个数字或字段标识符以传递给我们的 code-behind。但是,我不确定如何在此处添加它。我可以将图像名称添加到 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 添加到输出以确保我从字段中得到一些 return。接下来,我需要使用我不确定的数组。

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

更新和工作

将 WebForm1.aspx 中的代码更新为以下内容。
重点在这几行。

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

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

    <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[]")

运行 测试,成功了!! 每个字段代表每张上传的图片,很有魅力。

EE