בפוסט הקודם ניסינו לתת פתרון שלא עובד להעלאת קבצים בצורה שלא תעשה postback לדף. נכשלנו, והנה הפתרון הבא:
שימוש בASPNET AJAX, דוגמא ליכולת של העלאת קבצים שכזו יש במדריך של הקובץ DLL הזה.
טוב, איך מתחילים?
ראשית, נוסיף את הקובץ לפרוייקט, מהאתר נוריד את הקובץ ZIP נחלץ את הקובץ AjaxControlToolkit.dll ונעשה לו הפנייה מהפרוייקט שלנו. לחצן ימני על הפרוויקט "הוסף הפנייה", ואז למטה נלחץ על browes ונוסיף את הקובץ.
שלב שני: הוספה לweb.config
<system.web>
<!--מונע
מפוסטטבק לחזור לחלקו העליון של הדף במקרה של איפוס-->
<pages maintainScrollPositionOnPostBack="true">
<!--כדי
שAJAXTOOLKIT יעבוד -->
<controls>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
</controls>
</system.web>
שלב שלישי: הוספה לדף ASPX בראש העמוד
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
שלב רביעי: שים לב שהשם בכל הtagprefix זהה. אפשר לבחור שם אחר, ולשנות את "הקידומת" של האלמנטים בדף.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="UploadComplete" />
</ContentTemplate>
</asp:UpdatePanel>
שלב חמישי, ואחרון: לתת לפקודה UploadComplete משמעות בדף CS:
protected void UploadComplete(object sender, jaxControlToolkit.AjaxFileUploadEventArgs e)
{
}
מימוש של הקוד, נעזרתי בפרוייקט הזה, כדוגמא להעלאת תמונות. כדי שהתמונה גם תעלה וגם תופיע בדף נשתמש בכמה פקודות בJS.
נתחיל עם הפקד בASPX
<strong>העלאת תמונה</strong></label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="direction: rtl;" class="textHide">
<ajaxToolkit:AsyncFileUpload ID="FileUploadImg" runat="server" Width="400px"
AllowedFileTypes="jpg,jpeg,gif,png,JPG,PNG,GIF,JPEG"
OnClientUploadError="uploadError"
OnClientUploadStarted="StartUpload"
OnClientUploadComplete="UploadComplete"
CompleteBackColor="Lime"
ErrorBackColor="Red"
ThrobberID="Throbber"
UploaderStyle="Modern"
OnUploadedComplete="FileUploadImg_UploadedComplete" />
<asp:Label ID="Throbber" runat="server" Style="display: none">
<img src="../img/indicator.jpg" align="absmiddle" alt="loading" />
</asp:Label>
<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;" /><br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Image1"></div>
נעבור למימוש בצד הקליינט של הפקודה, שעושה שלושה דברים:
א. שומרת את הקובץ בשרת.
ב. שולחת את התמונה לצד הקליינט.
ג. כותבת חיווי למשתמש על התמונה:
protected void FileUploadImg_UploadedComplete(object sender,
AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
//validate
upload img typa && not null
if
((FileUploadImg.PostedFile.ContentType.ToLower().StartsWith("image")) && (FileUploadImg.HasFile))
{
string filename = FileUploadImg.FileName;
//
string typeImg = FileUploadImg.ContentType;
string directory = HttpRuntime.AppDomainAppPath + "img\\article\\";
//
Create and save bitmap of the content of the fileUpload control in memory
Bitmap originalBMP = new Bitmap(FileUploadImg.FileContent);
originalBMP.Save(directory +
filename);
//send
name file to clinet
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "newfile", "window.parent.$find('" + FileUploadImg.ClientID + "').newFileName='" + filename + "';", true);
// Once
finished with the bitmap objects, we deallocate them.
originalBMP.Dispose();
// Write
a message to inform the user all is OK
string deImg = "שם הקובץחדש: " + filename;
deImg += "גודלדל:
" +
FileUploadImg.PostedFile.ContentLength.ToString() + "KB";
deImg += "סוגג:
" + FileUploadImg.PostedFile.ContentType;
imgLable.Text = deImg;
//
Display the image to the user
Image1.Visible = true;
Image1.ImageUrl = @"/img/article/tn_" + filename;
}
else { lblStatus.Text =
"אין קובץ להעלאה או הקובץ אינו תמונה תקנית";
}
}uואי\ואי
<div id="Image1"></d>
ואיך אפשר בלי JS שיטפל בתמונה הנשלחת בצד לקוח:
//valide img
function validateIMG() {
var result = false;
var IMGfile = document.getElementById("MainContent_FileUploadImg").value;
if (IMGfile != "") {
var accept = "png,gif,jpg,jpeg,bmp".split(',');
var getExtention = IMGfile.split('.');
var extention = getExtention[getExtention.length -
1].toLowerCase(); //if is GIF etc.
for (i = 0; i < accept.length; i++) {
if (accept[i] == extention) {
result = true;
break;
}
}
if (!result) {
alert("allowed file extention are
png,gif,jpg,jpeg,bmp");
}
}
else {
alert("select
image to Upload");
}
return result;
}
//js for fileupload
function StartUpload(sender, args) {
document.getElementById('MainContent_lblStatus').innerText
= 'טוען קובץועןקובץ';
}
function uploadError(sender, args) {
document.getElementById('MainContent_lblStatus').innerText
= args.get_fileName(),
"<span
style='color:red;'>" +
args.get_errorMessage() + "</span>";
}
function UploadComplete(sender, args) {
var filename = sender.newFileName; // args.get_fileName();
var contentType = args.get_contentType();
var text = "שםשם הקובץבץ: " + filename + "בגודלל: " + args.get_length() + " KB";
if (contentType.length > 0) {
text += "מסוגג: '" + contentType + "'.";
}
document.getElementById('MainContent_lblStatus').innerText
= text;
//save
data for server
document.getElementById("MainContent_nameNewPicArticle").value = filename.toString();
//add
pic to ui
inserteImge(filename, "Image1")
}
function inserteImge(filename, ElementFatherName) {
var newImg = document.createElement("img");
newImg.src = "../img/article/" + filename;
newImg.id = "picArticle";
//add
img
var my_div = document.getElementById(ElementFatherName);
my_div.appendChild(newImg);
}
נ.ב. הקוד מועתק מקוד מורכב יותר, אז אני מקווה שהכל נכון. והכנסתי את השלד של הקוד בצורה נכונה.
