My Photo Table is
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
and the insertion procedure is as follows:
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
In order to upload multiple photos at once, I found a code snippet online that I incorporated into my design:
On the design side:
<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>
And on the code side:
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
{
...
}
}
}
However, I noticed that it only uploads one image at a time. While this works for me currently, I would like to implement a feature similar to Gmail where multiple images can be uploaded simultaneously. Can anyone provide guidance on how to modify the existing code for such functionality?