ドラッグアンドドロップを使用して画像をアップロードする方法について、多くのサイトを見てきました-どうやら技術は ajax と html5 を使用しています。問題は、ajax に関する知識が限られているため、作品をアップロードする方法がわからない、またはまったくわからないことです。例として使用されるサイト: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html および http://www.devbridge.com/projects/html5-ajax-file-upload/
私のページをモデルのように見せることができた場合...ファイルが見つかりました.ajaxの応答は、ファイルがアップロードされ、画像サイズ、MIMEタイプなどの情報が画面に表示されることを示しています。 model 、画像はdata/base64の形式で出力されますが、ここでも、自分自身を処理してアップロードする方法がわからないというループに陥ります。誰か助けて？
主な問題は、ファイル (画像) を $_POST または私が知らない他の方法で送信するファイル .php への呼び出しを行う方法です。
私にとって理想的には、最初の例はシンプルで機能的です。私たちはそれに取り組みますか？
見る：
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
<script>
(function () {
var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list");
function uploadFile (file) {
var li = document.createElement("li"),
div = document.createElement("div"),
img,
progressBarContainer = document.createElement("div"),
progressBar = document.createElement("div"),
reader,
xhr,
fileInfo;
li.appendChild(div);
progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
/*
If the file is an image and the web browser supports FileReader,
present a preview in the file list
*/
if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
li.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();
// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
}
else {
// No data to calculate on
}
}, false);
// File uploaded
xhr.addEventListener("load", function () {
progressBarContainer.className += " uploaded";
progressBar.innerHTML = "Uploaded!";
}, false);
xhr.open("post", "upload.php", true);
// Set appropriate headers
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
// Send the file (doh)
xhr.send(file);
// Present file info and append it to the list of files
fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10) + " kb</div>";
fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
div.innerHTML = fileInfo;
fileList.appendChild(li);
}
function traverseFiles (files) {
if (typeof files !== "undefined") {
for (var i=0, l=files.length; i<l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "No support for the File API in this web browser";
}
}
filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false);
dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target;
if (target && target === dropArea) {
this.className = "";
}
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
})();
</script>
私のphpは、テスト済みで機能する単純な投稿データの例です。このような：
<?php
$uploadpath = 'uploads/'; // diretorio para guardar as imagens
$max_size = 1020; // tamanho maximo do arquivo, em KiloBytes
$alwidth = 901; // largura maxima, em pixels
$alheight = 901; // altura maxima, em pixels
$allowtype = array('bmp', 'gif', 'jpg', 'jpe', 'png'); // extensoes permitidas
if(isset($_FILES['fileup']) && strlen($_FILES['fileup']['name']) > 1) {
$uploadpath = $uploadpath . basename( $_FILES['fileup']['name']); // pega o nome do arquivo
$sepext = explode('.', strtolower($_FILES['fileup']['name']));
$type = end($sepext); // pega extensao
list($width, $height) = getimagesize($_FILES['fileup']['tmp_name']); // pega altura e largura da imagem
$err = ''; // para guardar os erros
// Checa se o arquivo tem a extensao permitida, tamanho, largura e altura
if(!in_array($type, $allowtype)) $err .= 'O arquivo: <b>'. $_FILES['fileup']['name']. '</b> tem uma extensão não permitida.';
if($_FILES['fileup']['size'] > $max_size*1000) $err .= '<br/>O tamanho máximo do arquivo deve ser: '. $max_size. ' KB.';
if(isset($width) && isset($height) && ($width >= $alwidth || $height >= $alheight)) $err .= '<br/>A Largura x Altura máxima deve ser: '. $alwidth. ' x '. $alheight;
// Se não tem erros, faz upload da imagem, senão, mostra os erros
if($err == '') {
if(move_uploaded_file($_FILES['fileup']['tmp_name'], $uploadpath)) {
echo "Tudo ok";
}
else echo '<b>Erro ao fazer upload de arquivos na função de upload.</b>';
}
else echo $err;
}
?>
それで、これを達成するために私は何ができますか？前もって感謝します。