拖放图像上传不能在服务器上工作 [英] drag-and-drop image upload not working on server
问题描述
我正在尝试实施拖放图片上传。
我在线找到一个相当简单的脚本，并适应我的使用。
在我的本地安装文件上传完全正常，但不在服务器上。
从我的调试尝试中，$ _SERVER ['HTTP_X_FILENAME']甚至不会被php设置。
I am trying to implement a drag-and-drop image upload. I found a rather simple script online and adapted to my use. On my local installation the file uploads perfectly fine, but not on the server. From my debugging attempts the $_SERVER['HTTP_X_FILENAME'] does not even get set by php.
我尝试过以下操作：
- 制作确保上传文件夹设置为755
- 更改php临时上传路径并增加允许的最大文件大小
I tried the following: - Making sure that the upload folder is set to 755 - Changing the php temporary upload path and increasing the maximum allowed file size
没有任何类型的php或js错误发生。
因为我有死（print_r（$ _ SERVER））;在php中，我使用chrome检查器获取$ _SERVER转储，它不包含HTTP_X_FILENAME索引。
No php or js errors of any kind occur. Since I have the die(print_r($_SERVER)); in the php, I get the $_SERVER dump using the chrome inspector, it does not contain HTTP_X_FILENAME index.
我的PHP是：
<?php
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
// AJAX call
file_put_contents(
'../usr/photos/' . $fn,
file_get_contents('php://input')
);
echo "$fn uploaded";
exit();
}
else {
// form submit
if(!$_FILES['fileselect']) die(print_r($_SERVER));
else $files = $_FILES['fileselect'];
foreach ($files['error'] as $id => $err) {
if ($err == UPLOAD_ERR_OK) {
$fn = $files['name'][$id];
move_uploaded_file(
$files['tmp_name'][$id],
'../usr/photos/' . $fn
);
echo "<p>File $fn uploaded.</p>";
}
}
}
js如下：
//拖放照片上传
（function（）{
//Drag and drop photo upload (function() {
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
UploadFile(f);
}
}
// output file information
function ParseFile(file) {
/*Debug*/
Output(
"<p>File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</p>"
);
// display an image
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p>" +
//"<strong>" + file.name + ":</strong><br />" +
'<img width="130" height="100" src="' + e.target.result + '" />' +
'<br />' +
'<input type="text" name="photo_name" value="'+ file.name +'" />' +
'<br />' +
'<input type="text" name="photo_caption" value="Caption" /></p>'
);
}
reader.readAsDataURL(file);
}
// display text
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "<").replace(/>/g, ">") +
"</pre>"
);
}
reader.readAsText(file);
}
}
// upload JPEG files
function UploadFile(file) {
// following line is not necessary: prevents running on SitePoint servers
if (location.host.indexOf("sitepointstatic") >= 0) return
var xhr = new XMLHttpRequest();
if (xhr.upload && (file.type == "image/jpeg" || file.type == "image/png") && file.size <= $id("MAX_FILE_SIZE").value) {
// create progress bar
var o = $id("progress");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload " + file.name));
// progress bar
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
}, false);
// file received/failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
}
};
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.style.display = "none";
}
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
提前谢谢。
推荐答案
你可能现在已经解决了你的问题，但是我在这里发布这个解决方案来帮助那些来到这里的人遇到同样的问题。在你的js中，有一行显示
You probably will have solved your problem now, but I'm posting this solution here to help others who come here with the same problem. In your js, there is a line that reads
xhr.setRequestHeader("X_FILENAME", file.name);
但应阅读
xhr.setRequestHeader("X-FILENAME", file.name);
由于以后的Apache版本中不赞成使用下划线（另见
在php 5.5.1中忽略了带有下划线的标题名称/ apache 2.4.6 ）
since underscores are deprecated in later Apache releases (see also Header names with underscores ignored in php 5.5.1 / apache 2.4.6)
这篇关于拖放图像上传不能在服务器上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
