آپلود فایل:کار با Blob جهت انتقال فایل به سرور (آپلود پی دی اف و تصویر و فایل تسکت و...)

[_elhfarzan]

مشکل آپلود کردن بزرگترین مشکل برنامه نویسی من بوده.
البته در حین کار با asp classic
نیک آگاه هستم که تقریبا مشکل اکثریت برنامه نویس های کلاسیک کار هستش
یک سری کدهایی داخل نت هست که برای اپلود فایل با asp classic استفاده میشه
ولی هیچ کدام آژاکسی نیستن.
میخوام هم جاوااسکریپت پیشرفته رو بهتون آموزش بدم هم استفاده اون در آپلود کردن فایل با این زبان برنامه نویسی شیرین .
باور بفرمایید سالها با دات نت کار کردم .
ولی جا داره تنفر عمیق و تاسف فراوانمو از بابت این زبان شی گرای سنگین ابراز کنم .
تاسف از این بابت که چرا دات نت . چرا همین کلاسیکو توسعه ندادن کمی براش ابزار تولید نکردن که امثال من سالها زحمت بکشن تا یک چیز روتین که در پی اچ پی و دات نت و خیلی از زبانهای دیگه موجوده را تولید کنیم.
برای ما کلاسیک بازها این اوج ارزو باشه.

خیلی ساده :


<input type="button" onclick="st()" value="Send Pic Base64" ><input type="button" onclick="pdf()" value="Open PDF OR TExt" ><img id="MYPIC" /><div id="TypeSize" ></div>


این کد html برنامه ما بودکه در خط بالا نوشته شد

و حالا کد های جاوا اسکریپتی داستان








فایل سمت کلاینت


function pdf(){
var xhr = new XMLHttpRequest();
xhr.open('GET', '4.pdf', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
if (this.status == 200) {
// get binary data as a response
var blob = this.response;
var TypeSize = document.getElementById('TypeSize');
TypeSize.innerHTML=" size : "+blob.size;
TypeSize.innerHTML= TypeSize.innerHTML + " Type : "+blob.type;
var reader = new FileReader();
//reader.readAsText(blob);
// reader.addEventListener("loadend", function(e){//alert();
// TypeSize.innerHTML = TypeSize.innerHTML + "<br /> Matn File : " +e.srcElement.result;//prints a string
// Aj("Fnews.pdf",e.srcElement.result);
//});
var base64data="" ;
reader.readAsDataURL(blob);
//alert();
reader.onloadend = function() {
base64data = reader.result;
Aj("Fnews.pdf",base64data);
//alert(reader.result);
}

}
};

xhr.send();
}
function Aj(namefile,val)
{

var da = new Date();
var Randd= da.getMilliseconds();
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert();
var strArray=xmlhttp.responseText.split('^');
alert(strArray[0]);

}
}
val=val.replace(/;/gi, "^");
alert(val);
xmlhttp.open("POST","AjaXULodFle.asp?Randd="+Randd+"&FileName="+namefile,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("bas="+encodeURIComponent(val));


}






و در پایان استفاده از فایل با پسوند asp به عنوان کد اپلود کننده و همان فایل فراخوانی شده در قسمت آژاکس


<% @ Language=VBScript CodePage = 65001%>
<%


'response.write "^ok"+Request("bas")
Function SaveToBase64 (base64String)
Set Doc = Server.CreateObject("MSXML2.DomDocument")
Set nodeB64 = Doc.CreateElement("b64")
nodeB64.DataType = "bin.base64"
nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1)

dim bStream
set bStream = server.CreateObject("ADODB.stream")
bStream.type = 1
call bStream.Open()
call bStream.Write( nodeB64.NodeTypedValue )
call bStream.SaveToFile( Server.MapPath(".") +""+request.querystring("FileName"), 2 )
call bStream.close()
set bStream = nothing
end function


SaveToBase64(Replace(request("bas"),"^",";"))
%>

[_elhfarzan]

این کد یادم رفت.
نمایش آژاکسی یک تصویر.

function st(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/docs.png', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
if (this.status == 200) {
// get binary data as a response
var blob = this.response;
var TypeSize = document.getElementById('TypeSize');
TypeSize.innerHTML=" size : "+blob.size;
TypeSize.innerHTML= TypeSize.innerHTML + " Type : "+blob.type;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.getElementById('MYPIC');
image.src = base64data;
}
}
};

xhr.send();
}

[_elhfarzan]

تو این تایپیک به دوتا سوال مهم که تقریبا تو فروم های خارجی هم پاسخ مناسبی داده نشده پاسخ دادم.
1- اپلود فایل اونم آژاکسی با زبان کلاسیک و اسکریپت نویسی جاوا اسکریپت
2- امکان ارسال متن بلند از طریق آژاکس
مورد دوم مشکلی بود که حین ارسال یه متن بلند مثلا ckEditor میخواستید با آزاکس کلاسیک یه متن بلند رو ارسال کنید . محدودیت های کوئری استرینگ کار شما رو انجام نمیداد.
اینجا آژاکس کلاسیک رو با متد Post فراخوانی کردم. خوب توجه کنید به کد ها


xmlhttp.open("POST","AjaXULodFle.asp?Randd="+Randd +"&FileName="+namefile,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("bas="+encodeURIComponent(val));

[_elhfarzan]

تکنیک کلی رو یک بار توضیح میدم باقی مسائل در قالب سوالاتی که میکنید توضیح میدم.
ابتدا فایل رو به صورت ثابت اسمشو اوردم که شما میتونید پاس بدید ادرس و مسیرو ، به blob تبدیل کردم . سپس اونه base64 تبدیل کردم
در نهایت پاسش دادم به صفه کلاسیک به صورت آزاکسی.
در نهایت base64 رو آپلود در مسیر جاری سرور کردم که برنامه شما در اون مکان هستش

[_elhfarzan]

این کد زیرو تلفیق کنید با کدهای بالا تا کارتون داینامیک تر بشه.
چون اگر توجه کرده باشید در کد بالا من مسیر فایل و تصویر رو داینامیک ثابت گرفته بودم.
ولی این کد یک فایل بروزر هستش که از شما مثلا مسیر عکس رو میگیره و خروجی به شما هم تصویر عکس رو نمایش میده هم کد بیس 64 رو پس میده.
یعنی میتونید کلا blob رو هم دور بزنید و مستقیم از همین کد استفاده کرده و با متد پست آزاکس به فایل کلاسیکی که بالا نوشتم پاسش بدید و در مسیر سرور آپلودش کنید


function previewFile() {
var base64data ;
var image = document.getElementById('MYPIC');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();

// be-jaye reder-onload 2 khat payin tar mishod az in coe estefade kard :: reader.addEventListener("load", function () {MYPIC.src = reader.result;}, false);
if (file) {
reader.readAsDataURL(file);
reader.onloadend = function() {
base64data = reader.result;
alert(base64data );
image.src = base64data;
}
}
}




<input type="file" onchange="previewFile()"><br>
<img id="MYPIC" >