多张图片上传代码不起作用？答案

【问题标题】：Multiple image upload code does not working?多张图片上传代码不起作用？
【发布时间】：2013-10-24 02:32:22
【问题描述】：

我的照片桌是

Column Name Data Type   Constraint
PhotoID     Int         Primary key,auto increment
PhotoName   Varchar(100)    
ExtName     Varchar(100)    
PhotoType   Varchar(100)    
PhotoSize   Int 
TempleID    Int         Foreign key with templeinfo

插入过程是

create proc [dbo].[prcTemplePhoto]
(
@PhotoName  Varchar(100),
@ExtName    Varchar(100),
@PhotoType  Varchar(100),
@PhotoSize  int,
@TempleID   Int
)
as
insert into TemplePhoto(PhotoName,ExtName,PhotoType,PhotoSize,TempleID) values (@PhotoName,@ExtName,@PhotoType,@PhotoSize,@TempleID)
select @@IDENTITY

我想一次上传多张照片，为此我从互联网上复制了代码

在设计方面

<tr>
        <td>
            <asp:Label ID="lbltemplepic" runat="server" Text="Temple Photo"></asp:Label>
        </td>
        <td id="fileUploadarea">
            <div>
                <div id="Div1">
                    <asp:FileUpload ID="templeupload" runat="server" CssClass="fileUpload" /><br />
                </div>
                <br />
                <div>
                    <input style="display: block;" id="btnAddMoreFiles" type="button" value="Add more images" onclick="AddMoreImages();" /><br />
                    <asp:Button ID="btnuplaod" runat="server"  Text="Upload" OnClick="btnuplaod_Click"  />
                </div>
            </div>
        </td>
        <td></td>
    </tr>
<tr><td></td><td>
    <asp:Button ID="btninsert" runat="server" Text="Insert" OnClick="btninsert_Click"  />
    </td><td></td></tr>
    <tr><td></td><td>
        <asp:Label ID="lblerror" runat="server" Text=""></asp:Label></td><td></td></tr>
                   <script lang="javascript" type="text/javascript">
                       function AddMoreImages() {
                           if (!document.getElementById && !document.createElement)
                               return false;
                           var fileUploadarea = document.getElementById("fileUploadarea");
                           if (!fileUploadarea)
                               return false;
                           var newLine = document.createElement("br");
                           fileUploadarea.appendChild(newLine);
                           var newFile = document.createElement("input");
                           newFile.type = "file";
                           newFile.setAttribute("class", "fileUpload");

                           if (!AddMoreImages.lastAssignedId)
                               AddMoreImages.lastAssignedId = 100;
                           newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
                           newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
                           var div = document.createElement("div");
                           div.appendChild(newFile);
                           div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
                           fileUploadarea.appendChild(div);
                           AddMoreImages.lastAssignedId++;
                       }
                       </script>

在代码方面

 if (templeupload.HasFile)
                {
                    TemplePhoto tempphoto = new TemplePhoto();
                    tempphoto.PhotoName = templeupload.FileName;
                    tempphoto.PhotoSize = templeupload.PostedFile.ContentLength;
                    tempphoto.PhotoType = templeupload.PostedFile.ContentType;
                    tempphoto.ExtName = tempphoto.PhotoName.Substring(tempphoto.PhotoName.LastIndexOf(".") + 1);
                    tempphoto.TempleID = ans;
                      HttpFileCollection hfc = Request.Files;
                      for (int i = 0; i < hfc.Count; i++)

                      {
                                HttpPostedFile hpf = hfc[i];
                                if (hpf.ContentLength > 0)
                                {
                    int id = new DBTemplePhoto().InsertData(tempphoto);
                    if (id != 0)
                    {
                                    hpf.SaveAs(Server.MapPath("~/templepics/") + ans.ToString() + "." + tempphoto.ExtName);
                                    lblerror.Text = " File is Uploaded ";
                                }
                                     else
                    {
                        lblerror.Text = "Please check all the fields";
                    }
                            }
                      }

但它只上传一张图片

实际上，我想要多个图像上传器，就像 gmail 一样，但我妥协了这个。你能帮我解决上传多张图片的代码错误吗？如果可能的话，请告诉代码以获取像 gmail 这样的上传器

【问题讨论】：

在我看来这可能是浏览器问题。你能告诉我你用的是什么浏览器吗？我知道IE10不支持多文件上传...
正在使用什么版本的 asp.net？你是在做 ctrl+selecting a file...来选择多个文件吗？
我正在使用 c# 4.0 和 Visual Studio 2012。是的，我想通过按 ctrl 来选择多张图片

标签： c# javascript asp.net ajax file-upload

【解决方案1】：

尝试在服务器端将 multipart/form-data 添加到您的表单：

this.Form.Enctype = "multipart/form-data";

不要重复使用“templeupload”属性，只使用循环中的“HttpPostedFile hpf”属性。

要获得更好的多文件上传器，请查看 JqueryFileUpload 插件： https://github.com/i-e-b/jQueryFileUpload.Net

【讨论】：

【解决方案2】：

在文件上传控件上设置允许多个文件上传属性：

<asp:FileUpload ID="templeupload" runat="server" CssClass="fileUpload" 
    AllowMultiple="true" />

在服务器上，您必须遍历 PostedFiles 集合。

foreach(HttpPostedFile hpf in templeupload.PostedFiles)
{
    //do stuff with hpf
    hpf.SaveAs(...);
}

【讨论】：