5
HTML5'in DnD ve Dosya API'sini kullanarak dosya yüklemeye çalışıyorum. Sunucuya form verilerinin nasıl gönderileceğinden emin değilim, XMLHttpRequest kullanarak göndermeyi denedim ancak başarılı olmadı. Şimdiye kadar sahip olduğum bu.HTML5'in sürükle ve bırak kullanarak dosya yükleme Asp.net
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<br />
<div id="drop_area">Drop files here</div> <br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/>
</form>
</body>
<script>
if (window.File && window.FileList && window.FileReader) {
var dropZone = document.getElementById('drop_area');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDnDFileSelect, false);
}
else {
alert('Sorry! this browser does not support HTML5 File APIs.');
}
</script>
var files;
function handleDragOver(event) {
event.stopPropagation();
event.preventDefault();
var dropZone = document.getElementById('drop_zone');
dropZone.innerHTML = "Drop now";
}
function handleDnDFileSelect(event) {
event.stopPropagation();
event.preventDefault();
/* Read the list of all the selected files. */
files = event.dataTransfer.files;
/* Consolidate the output element. */
var form = document.getElementById('form1');
var data = new FormData(form);
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
var xhr = XMLHttpRequest();
xhr.open("POST", "Upload.aspx"); //Wrong ? not sure.
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.send(data);
}
C#:
HttpFileCollection fileCollection = Request.Files;
for (int i = 0; i < fileCollection.Count; i++)
{
HttpPostedFile upload = fileCollection[i];
string filename ="c:\\Test\\" + upload.FileName;
upload.SaveAs(filename);
}
ben kullanmıyorum artık itibariyle i arayüzünde bir düğmesi vardır biliyorum. Ama gördüğünüz gibi XMLHttpRequest kullanarak bir istek göndermeye çalışıyorum. Birisi bana daha fazla nasıl ilerleyebileceğimi önerebilir. Ancak sunucu tarafı kodum asla çalıştırılamıyor XMLHttpRequest'in başarılı olup olmadığından emin değilim.
Sağladığınız bağlantı bana çok yardımcı oldu! Bunun için teşekkürler. Ayrıca, gönderim sırasında etiketi ile değiştirilmiş (yeniden boyutlandırılan) görüntü dosyaları gönderme hakkında bir şeyle karşılaşma şansınız oldu mu? Aslında bunun hakkında aktif bir sorum var: $ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter