jQuery + PHP多文件拖放上傳無法創建縮略圖 - WEIRD

Question

一直在工作在這個令人討厭的兒子的槍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(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); 
} 

    }); 

了jQuery他們給我的示例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); 
    } 

Answer 1

正如OP的評論中所述;

看來文件上傳例子並不正確填充造成打擊交換機的default塊（一exit）

附帶文件類型，你可能要交換這並拋出異常，所以你會看到什麼在日誌中有用