jQuery + PHP多文件拖放上传无法创建缩略图-WEIRD - php

在这个令人讨厌的枪支儿子上工作了3天。希望有人能够提供一些帮助。基本上，我使用http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/允许多个文件上传以及常规文件上传输入。此代码的第一部分是复制上载的原始图像。两者都很好。第二部分是缩略图，在使用拖放脚本时将不起作用，但是在标准上传条件下可以完美地工作。我以为我的问题不在于此代码，但我将其包括在内只是为了向您展示。我还将包括几乎所有其他代码，以防您发现它与诊断有关并且对您有所帮助。

    // copying original image to new location with new name
    $prev = file_get_contents($pic['tmp_name']);
    $new = fopen($file, "w");
    fwrite($new, $prev);
    fclose($new);

    //create image for thumbnail
    switch(strtolower($pic['type']))
    {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($pic['tmp_name']);
            break;
        case 'image/png':
            $image = imagecreatefrompng($pic['tmp_name']);
            imagealphablending($image, true); // setting alpha blending on
            imagesavealpha($image, true);
            break;
        case 'image/gif':
            $image = imagecreatefromgif($pic['tmp_name']);
            break;
        default:
            exit('Unsupported type: '.$pic['type']);
    }

    // Target dimensions
    $max_width = 150;
    $max_height = 150;

    // Get current dimensions
    $old_width  = imagesx($image);
    $old_height = imagesy($image);

    // Calculate the scaling we need to do to fit the image inside our frame
    $scale = min($max_width/$old_width, $max_height/$old_height);

    // Get the new dimensions
    $new_width  = ceil($scale*$old_width);
    $new_height = ceil($scale*$old_height);

    // Create new empty image
    $new = imagecreatetruecolor($new_width, $new_height);

    // Resize old image into new
    imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $old_width, $old_height);

    // Catch the imagedata
    ob_start();
    //create image for thumbnail
    switch(strtolower($pic['type']))
    {
        case 'image/jpeg':
            imagejpeg($new, $_SERVER['DOCUMENT_ROOT']."/".$thumbnail, 90);
            break;
        case 'image/png';
            imagepng($new, $_SERVER['DOCUMENT_ROOT']."/".$thumbnail, 9);
            break;
        case 'image/gif':
            imagegif($new, $_SERVER['DOCUMENT_ROOT']."/".$thumbnail, 9);
            break;
        default:
            exit('Unsupported type: '.$pic['type']);
    }

    chmod($_SERVER['DOCUMENT_ROOT']."/".$thumbnail,0755);

    $data = ob_get_clean();

    // Destroy resources
    imagedestroy($image);
    imagedestroy($new);

HTML

<h1>Upload Image(s)</h1>
<form action='ajax/post_file.php' method='post' enctype="multipart/form-data">
    <input type='file' name='file'><input type='hidden' name='drag_drop' value='yes'><input type='submit' value='go'>
    </form>
        <!-- Our CSS stylesheet file -->
    <link rel="stylesheet" href="ajax/drag_drop_uploads/css/styles.css" />
        <div id="dropbox" style='height: 400px; overflow: auto;'>
        <span class="message">Drop images here to upload. <br /><i>(they will be automatically uploaded to your account)</i></span>
    </div>

处理拖放上传的JQuery插件

         (function(jQuery){

jQuery.event.props.push("dataTransfer");
var opts = {},
    default_opts = {
        url: '',
        refresh: 1000,
        paramname: 'userfile',
        maxfiles: 25,
        maxfilesize: 5, // MBs
        data: {},
        drop: empty,
        dragEnter: empty,
        dragOver: empty,
        dragLeave: empty,
        docEnter: empty,
        docOver: empty,
        docLeave: empty,
        beforeEach: empty,
        afterAll: empty,
        rename: empty,
        error: function(err, file, i){alert(err);},
        uploadStarted: empty,
        uploadFinished: empty,
        progressUpdated: empty,
        speedUpdated: empty
    },
    errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"],
    doc_leave_timer,
    stop_loop = false,
    files_count = 0,
    files;

jQuery.fn.filedrop = function(options) {
    opts = jQuery.extend( {}, default_opts, options );

    this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
    jQuery(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
};

function drop(e) {
    opts.drop(e);
    files = e.dataTransfer.files;
    if (files === null || files === undefined) {
        opts.error(errors[0]);
        return false;
    }

    files_count = files.length;
    upload();
    e.preventDefault();
    return false;
}

function getBuilder(filename, filedata, boundary) {
    var dashdash = '--',
        crlf = '\r\n',
        builder = '';

    jQuery.each(opts.data, function(i, val) {
        if (typeof val === 'function') val = val();
        builder += dashdash;
        builder += boundary;
        builder += crlf;
        builder += 'Content-Disposition: form-data; name="'+i+'"';
        builder += crlf;
        builder += crlf;
        builder += val;
        builder += crlf;
    });

    builder += dashdash;
    builder += boundary;
    builder += crlf;
    builder += 'Content-Disposition: form-data; name="'+opts.paramname+'"';
    builder += '; filename="' + filename + '"';
    builder += crlf;

    builder += 'Content-Type: application/octet-stream';
    builder += crlf;
    builder += crlf; 

    builder += filedata;
    builder += crlf;

    builder += dashdash;
    builder += boundary;
    builder += dashdash;
    builder += crlf;
    return builder;
}

function progress(e) {
    if (e.lengthComputable) {
        var percentage = Math.round((e.loaded * 100) / e.total);
        if (this.currentProgress != percentage) {

            this.currentProgress = percentage;
            opts.progressUpdated(this.index, this.file, this.currentProgress);

            var elapsed = new Date().getTime();
            var diffTime = elapsed - this.currentStart;
            if (diffTime >= opts.refresh) {
                var diffData = e.loaded - this.startData;
                var speed = diffData / diffTime; // KB per second
                opts.speedUpdated(this.index, this.file, speed);
                this.startData = e.loaded;
                this.currentStart = elapsed;
            }
        }
    }
}



function upload() {
    stop_loop = false;
    if (!files) {
        opts.error(errors[0]);
        return false;
    }
    var filesDone = 0,
        filesRejected = 0;

    if (files_count > opts.maxfiles) {
        opts.error(errors[1]);
        return false;
    }

    for (var i=0; i<files_count; i++) {
        if (stop_loop) return false;
        try {
            if (beforeEach(files[i]) != false) {
                if (i === files_count) return;
                var reader = new FileReader(),
                    max_file_size = 1048576 * opts.maxfilesize;

                reader.index = i;
                if (files[i].size > max_file_size) {
                    opts.error(errors[2], files[i], i);
                    filesRejected++;
                    continue;
                }

                reader.onloadend = send;
                reader.readAsBinaryString(files[i]);
            } else {
                filesRejected++;
            }
        } catch(err) {
            opts.error(errors[0]);
            return false;
        }
    }

    function send(e) {
        // Sometimes the index is not attached to the
        // event object. Find it by size. Hack for sure.
        if (e.target.index == undefined) {
            e.target.index = getIndexBySize(e.total);
        }

        var xhr = new XMLHttpRequest(),
            upload = xhr.upload,
            file = files[e.target.index],
            index = e.target.index,
            start_time = new Date().getTime(),
            boundary = '------multipartformboundary' + (new Date).getTime(),
            builder;

        newName = rename(file.name);
        if (typeof newName === "string") {
            builder = getBuilder(newName, e.target.result, boundary);
        } else {
            builder = getBuilder(file.name, e.target.result, boundary);
        }

        upload.index = index;
        upload.file = file;
        upload.downloadStartTime = start_time;
        upload.currentStart = start_time;
        upload.currentProgress = 0;
        upload.startData = 0;
        upload.addEventListener("progress", progress, false);

        xhr.open("POST", opts.url, true);
        xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' 
            + boundary);

        xhr.sendAsBinary(builder);  

        opts.uploadStarted(index, file, files_count);  

        xhr.onload = function() { 
            if (xhr.responseText) {
            var now = new Date().getTime(),
                timeDiff = now - start_time,
                result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff);
                filesDone++;
                if (filesDone == files_count - filesRejected) {
                    afterAll();
                }
            if (result === false) stop_loop = true;
            }
        };
    }
}

function getIndexBySize(size) {
    for (var i=0; i < files_count; i++) {
        if (files[i].size == size) {
            return i;
        }
    }

    return undefined;
}

function rename(name) {
    return opts.rename(name);
}

function beforeEach(file) {
    return opts.beforeEach(file);
}

function afterAll() {
    return opts.afterAll();
}

function dragEnter(e) {
    clearTimeout(doc_leave_timer);
    e.preventDefault();
    opts.dragEnter(e);
}

function dragOver(e) {
    clearTimeout(doc_leave_timer);
    e.preventDefault();
    opts.docOver(e);
    opts.dragOver(e);
}

function dragLeave(e) {
    clearTimeout(doc_leave_timer);
    opts.dragLeave(e);
    e.stopPropagation();
}

function docDrop(e) {
    e.preventDefault();
    opts.docLeave(e);
    return false;
}

function docEnter(e) {
    clearTimeout(doc_leave_timer);
    e.preventDefault();
    opts.docEnter(e);
    return false;
}

function docOver(e) {
    clearTimeout(doc_leave_timer);
    e.preventDefault();
    opts.docOver(e);
    return false;
}

function docLeave(e) {
    doc_leave_timer = setTimeout(function(){
        opts.docLeave(e);
    }, 200);
}

function empty(){}

try {
    if (XMLHttpRequest.prototype.sendAsBinary) return;
    XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
        function byteValue(x) {
            return x.charCodeAt(0) & 0xff;
        }
        var ords = Array.prototype.map.call(datastr, byteValue);
        var ui8a = new Uint8Array(ords);
        this.send(ui8a.buffer);
    }
} catch(e) {}

    })(jQuery);

往返于插件的JQuery

     jQuery(function(){

var dropbox = jQuery('#dropbox'),
    message = jQuery('.message', dropbox);

dropbox.filedrop({
    // The name of the jQuery_FILES entry:
    paramname:'file',

    maxfiles: 25,
    maxfilesize: 5,
    url: 'ajax/post_file.php',

    uploadFinished:function(i,file,response){
        jQuery.data(file).addClass('done');
        // response is the JSON object that post_file.php returns
    },

    error: function(err, file) {
        switch(err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files! Please select 5 at most! (configurable)');
                break;
            case 'FileTooLarge':
                alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
                break;
            default:
                break;
        }
    },

    // Called before each upload is started
    beforeEach: function(file){
        if(!file.type.match(/^image\//)){
            alert('Only images are allowed!');

            // Returning false will cause the
            // file to be rejected
            return false;
        }
    },

    uploadStarted:function(i, file, len){
        createImage(file);
    },

    progressUpdated: function(i, file, progress) {
        jQuery.data(file).find('.progress').width(progress);
    }

});

var template = '<div class="preview">'+
                    '<span class="imageHolder">'+
                        '<img />'+
                        '<span class="uploaded"></span>'+
                    '</span>'+
                    '<div class="progressHolder">'+
                        '<div class="progress"></div>'+
                    '</div>'+
                '</div>'; 


function createImage(file){

    var preview = jQuery(template), 
        image = jQuery('img', preview);

    var reader = new FileReader();

    image.width = 100;
    image.height = 100;

    reader.onload = function(e){

        // e.target.result holds the DataURL which
        // can be used as a source of the image:

        image.attr('src',e.target.result);
    };

    // Reading the file as a DataURL. When finished,
    // this will trigger the onload function above:
    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    // Associating a preview container
    // with the file, using jQuery's jQuery.data():

    jQuery.data(file,preview);
}

function showMessage(msg){
    message.html(msg);
}

    });

他们给我的示例PHP

       $demo_mode = false;
       $upload_dir = 'ajax/uploads/';
       $allowed_ext = array('jpg','jpeg','png','gif');


      if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
  exit_status('Error! Wrong HTTP method!');
      }


    if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

$pic = $_FILES['pic'];

if(!in_array(get_extension($pic['name']),$allowed_ext)){
    exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
}   

if($demo_mode){

    // File uploads are ignored. We only log them.

    $line = implode('       ', array( date('r'), $_SERVER['REMOTE_ADDR'],          
            $pic['size'], $pic['name']));
    file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);

    exit_status('Uploads are ignored in demo mode.');
        }


// Move the uploaded file from the temporary 
// directory to the uploads folder:

if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
    exit_status('File was uploaded successfuly!');
}

    }

    exit_status('Something went wrong with your upload!');


     // Helper functions

     function exit_status($str){
 echo json_encode(array('status'=>$str));
 exit;
     }

    function get_extension($file_name){
$ext = explode('.', $file_name);
$ext = array_pop($ext);
return strtolower($ext);
     }

参考方案

如OP评论中所述；

似乎文件上传示例未正确填充文件类型，导致击中了开关的default块（一个exit）

顺便说一句，您可能希望将其交换为引发异常，以便将来在日志中看到有用的信息

jQuery PHP在函数中传递值与实时单击？ - php

我正在尝试通过onclick传递一些值，这对我来说要快得多。但是我需要使用某种“实时”单击，并且正在查看.on（）或.delegate（）。但是，如果执行这些操作中的任何一个，则在followme()中传递这些值似乎很难。有没有我看不到的某种方法？ <div class='btn btn-mini follow-btn' data-…

使用jQuery将值增加到attr - php

我想增加i的值。 “ for”循环不起作用。$("a[href$='.xls']").appendTo(".xl1").attr('id','xl'+i); 我搜索所有excel文件，并将它们放在容器中并增加其id的值。谢谢吉恩 参考方案 $("a[…

PHP-全局变量的性能和内存问题 - php

假设情况：我在php中运行一个复杂的站点，并且我使用了很多全局变量。我可以将变量存储在现有的全局范围内，例如$_REQUEST['userInfo']，$_REQUEST['foo']和$_REQUEST['bar']等，然后将许多不同的内容放入请求范围内（这将是适当的用法，因为这些数据指的是要求自…

PHP strtotime困境 - php

有人可以解释为什么这在我的服务器上输出为true吗？date_default_timezone_set('Europe/Bucharest'); var_dump( strtotime('29.03.2015 03:00', time()) === strtotime('29.03.2015 04:00�…

php-casperjs获取内部文本 - php

我正在为casperjs使用php包装器-https://github.com/alwex/php-casperjs我正在网上自动化一些重复的工作，我需要访问一个项目的innerText，但是我尚不清楚如何从casperjs浏览器访问dom。我认为在js中我会var arr = document.querySelector('label.input…