HTML5文件拖动;通过php删除文件上传

时间:2011-10-12 08:28:22

标签: php html5 file-upload drag-and-drop

好的,在这里有点厚 - 我想,正在看pangratz / dnd-file-upload和拖拽& drop is great etc(我知道不是跨浏览器等但无所谓)但我不能做的是创建正确的PHP代码来处理实际的上传。

这是基本的js代码

$(document).ready(function(){

            $.fn.dropzone.uploadStarted = function(fileIndex, file){
                var infoDiv = $("<div></div>");
                infoDiv.attr("id", "dropzone-info" + fileIndex);
                infoDiv.html("upload started: " + file.fileName);

                var progressDiv = $("<div></div>");
                progressDiv.css({
                    'background-color': 'orange',
                    'height': '20px',
                    'width': '0%'
                });
                progressDiv.attr("id", "dropzone-speed" + fileIndex);

                var fileDiv = $("<div></div>");
                fileDiv.addClass("dropzone-info");
                fileDiv.css({
                    'border' : 'thin solid black',
                    'margin' : '5px'
                });
                fileDiv.append(infoDiv);                
                fileDiv.append(progressDiv);                

                $("#dropzone-info").after(fileDiv);
            };
            $.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
                $("#dropzone-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
                $("#dropzone-speed" + fileIndex).css({
                    'width': '100%',
                    'background-color': 'green' 
                });
            };
            $.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, newProgress){
                $("#dropzone-speed" + fileIndex).css("width", newProgress + "%");
            };
            $.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
                var dive = $("#dropzone-speed" + fileIndex);

                dive.html( getReadableSpeedString(KBperSecond) );
            };
            $.fn.dropzone.newFilesDropped = function(){
                $(".dropzone-info").remove();
            };
            $("#dropzone").dropzone({
                url : "upload.php",
                printLogs : true,
                uploadRateRefreshTime : 500,
                numConcurrentUploads : 2
            });

        });

但我不能让upload.php以任何方式工作

  $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = '';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
move_uploaded_file($tempFile,$targetFile);
        echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);

建议等欢迎所有我需要做的就是将图像上传到服务器并保存到数据库(保存不错ONCE我可以获得拖放图像以移动到服务器。哦,我不想要使用第三方应用。

提前致谢

1 个答案:

答案 0 :(得分:0)

我还没有找到如何使用你的拖拽和放下图书馆。因为我认为ajax请求不设置$ _FILES。 我知道这不是一个完整的解决方案,但如果你真的需要快速回答,那么它就是:

jquery-filedrop

使用此库,您可以发送设置'paramname'的POST变量。

$('#dropzone').filedrop({
    url: 'upload.php',              // upload handler, handles each file separately
    paramname: 'Filedata',

有了这个,你的PHP代码应该工作。我已经用过了,很简单。 希望它有所帮助。