Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, estou usando um script para upload de imagens e gostaria de saber como colocar uma barra de progresso e também como colocar um botão para cancelar o upload de imagens indesejadas,o script é este:
<script>
// Stores all files to be upload (drag and drop can be done in multiple steps)
var filesToUpload = [];
function addDropFilesCapabilities(){
var dropArea = document.getElementById("dropArea");
dropArea.addEventListener("dragenter", function(event) {
event.preventDefault();
}, true);
dropArea.addEventListener("dragover", function(event) {
event.preventDefault();
dropArea.className = "dropAreaOver";
}, true);
dropArea.addEventListener("dragleave", function(event) {
event.preventDefault();
dropArea.className = "";
}, true);
dropArea.addEventListener("drop", function(event) {
event.preventDefault();
dropArea.className = "";
var allFiles = event.dataTransfer.files;
for (var i = 0; i<allFiles.length; i++){
var file = allFiles[i];
filesToUpload.push(file);
if (file.type!="image/jpeg"){
return;
}
createImageViewFromImageFile(file);
}
}, true);
}
function createImageViewFromImageFile(file){
var img = document.createElement("img");
var reader = new FileReader();
// Allow the fileReader event handler to get the right image reference.
reader.img = img;
reader.onloadend = function() {
this.img.src = this.result;
}
reader.readAsDataURL(file);
img.classList.add("obj");
var content = document.getElementById("content");
content.appendChild(img);
}
function uploadFiles(){
if (window.FormData){
uploadUsingFormData();
} else {
uploadUsingGetAsBinary();
}
}
function uploadUsingFormData(){
var f = new FormData();
for (var i=0; i<filesToUpload.length; i++){
var file = filesToUpload[i];
f.append("images[]", file);
}
var request = new XMLHttpRequest();
request.open("POST", "upload.php?id=<?php echo $id_noticia ?>", true);
request.onload = uploadResultHandler;
request.send(f);
}
function uploadUsingGetAsBinary(){
var boundary = '------multipartformboundary' + (new Date).getTime();
var dashdash = '--';
var crlf = '\r\n';
/* Build RFC2388 string. */
var builder = '';
builder += dashdash;
builder += boundary;
builder += crlf;
/* For each dropped file. */
for (var i=0; i<filesToUpload.length; i++){
var file = filesToUpload[i];
/* Generate headers. */
builder += 'Content-Disposition: form-data; name="images[]"';
if (file.fileName) {
builder += '; filename="' + file.fileName + '"';
}
builder += crlf;
builder += 'Content-Type: application/octet-stream';
builder += crlf;
builder += crlf;
/* Append binary data. */
builder += file.getAsBinary();
builder += crlf;
/* Write boundary. */
builder += dashdash;
builder += boundary;
builder += crlf;
}
/* Mark end of the request. */
builder += dashdash;
builder += boundary;
builder += dashdash;
builder += crlf;
var request = new XMLHttpRequest();
request.open("POST", "upload.php?id=<?php echo $id_noticia ?>", true);
request.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
request.onload = uploadResultHandler;
request.sendAsBinary(builder);
}
function uploadResultHandler(event){
if (event.target.readyState != 4)
return;
/* If we got an error display it. */
result = eval("(" + event.target.responseText + ")");
alert(result.message);
if (result.status == 1){
filesToUpload = [];
}
}
window.onload=function(){
addDropFilesCapabilities();
}
</script>
</head>
<body>
<div id="dropArea">Arraste as fotos para cá!</div>
<div id="content">
</div>
<div id="submitPanel">
<button class="btn success" onClick="uploadFiles()">Enviar arquivos</button>
</div>Carregando comentários...