Question

我希望能够创建一个拖放解决方案，一次删除多个文件，筛选出无效的mime类型，每个类型都有一个进度条，使用javascript，php和html。任何人都可以帮忙吗？

Answer 1

我在博客文章中找到了这个很棒的脚本，它有一个演示和一个下载链接。

http://www.amitpatil.me/drag-and-drop-multiple-file-upload-with-progress-bar/

原始脚本一次只处理一个文件，只处理.jpg文件。

我个人修改它以传递mimeType，以便它可以存储多个mimeTypes，而不仅仅是jpg。它还可以同时执行多个文件。此外，它还有一个允许的mime类型列表，因此所有其他类型都被阻止。 php文件存储适当的扩展名。您可以轻松地修改它，以便它满足您允许的mimeType需求。

出于我的目的，我将上传最大尺寸设置为200兆，因为我希望人们能够上传视频。您可以设置自己的最大尺寸。

以下是我的替换脚本，效果很好。

您的html脚本中的任何位置都会将这些行添加到您想要放置框的位置。

            <link rel="stylesheet" href="styles/uploadstyle.css">
            <div id="dropbox">
              <div class="text">
                Drop Files Here
              </div>
            </div>
            <script src="js/filereader.js"></script>
            <script src="js/upload.js"></script>

upload.js

$(document).ready(function(){
  var dropbox;
  var oprand = {
    dragClass : "active",
    on: {
      load: function(e, file) {
        var imageTypes = ["image/bmp", "image/gif", "image/jpeg", "image/png", "text/plain", "application/pdf", "video/mpeg", "video/x-mpeg", "video/quicktime", "video/mpeg-4","video/mp4"];
        var arrayLength = imageTypes.length;
        var match = false;
        for (var i = 0; i < arrayLength; i++) {
          if(file.type == imageTypes[i]) match = imageTypes[i];
        }

        // check file type
        //var imageType = /image.*/;
        //if (!file.type.match(imageType)) {
        if (!match) {
          alert("File \""+file.name+"\" is not a valid mime type for this upload [" + file.type + "]");
          return false;
        }

        // check file size
        if (parseInt(file.size / 1024) > 200050) {
          alert("File \""+file.name+"\" is too big.Max allowed size is 2 MB.");
          return false;
        }

        create_box(e,file,match);
      },
    }
  };

  FileReaderJS.setupDrop(document.getElementById('dropbox'), oprand);

});

create_box = function(e,file,mimeType){
  var rand = Math.floor((Math.random()*100000)+3);
  var imgName = file.name; // not used, Irand just in case if user wanrand to print it.
  var src       = e.target.result;
  if (mimeType=='text/plain' || mimeType=='application/pdf' || mimeType=='video/mpeg' || mimeType=='video/x-mpeg' ||
    mimeType=='video/mpeg-4' || mimeType=='video/mp4' || mimeType=='video/quicktime')
  {
    src = '/images/' + 'missing-mcsanl.gov_.png'
  }

  var template = '<div class="eachImage" id="'+rand+'">';
  template += '<span class="preview" id="'+rand+'"><img src="'+src+'"><span class="overlay"><span class="updone"></span></span>';
  template += '</span>';
  template += '<div class="progress" id="'+rand+'"><span></span></div>';

  if($("#dropbox .eachImage").html() == null)
    $("#dropbox").html(template);
  else
    $("#dropbox").append(template);

  // upload image
  upload(file,rand,mimeType);
}

upload = function(file,rand,mimeType){
  // now upload the file
  var xhr = new Array();
  xhr[rand] = new XMLHttpRequest();
  xhr[rand].open("post", "ajax_fileupload.php?mimeType="+encodeURIComponent(mimeType), true);

  xhr[rand].upload.addEventListener("progress", function (event) {
    console.log(event);
    if (event.lengthComputable) {
      $(".progress[id='"+rand+"'] span").css("width",(event.loaded / event.total) * 100 + "%");
      $(".preview[id='"+rand+"'] .updone").html(((event.loaded / event.total) * 100).toFixed(2)+"%");
    }
    else {
      alert("Failed to compute file upload length");
    }
  }, false);

  xhr[rand].onreadystatechange = function (oEvent) {
    if (xhr[rand].readyState === 4) {
      if (xhr[rand].status === 200) {
        $(".progress[id='"+rand+"'] span").css("width","100%");
        $(".preview[id='"+rand+"']").find(".updone").html("100%");
        $(".preview[id='"+rand+"'] .overlay").css("display","none");
      } else {
        alert("Error : Unexpected error while uploading file");
      }
    }
  };

  // Set headers
  xhr[rand].setRequestHeader("Content-Type", "multipart/form-data");
  xhr[rand].setRequestHeader("X-File-Name", file.fileName);
  xhr[rand].setRequestHeader("X-File-Size", file.fileSize);
  xhr[rand].setRequestHeader("X-File-Type", file.type);

  // Send the file (doh)
  xhr[rand].send(file);
}

ajax_fileupload.php

<?php
$str = file_get_contents('php://input');
switch ($_REQUEST['mimeType']) {
  //see if we can do something about text dropped into a window to be used for youtube/vimeo links
  //case 'video/youtube':
  //case 'video/vimeo':
  case 'image/bmp':
    echo $filename = md5(time().uniqid()).".bmp";
    $returnVal=true;
    break;
  case 'image/gif':
    echo $filename = md5(time().uniqid()).".gif";
    $returnVal=true;
    break;
  case 'image/jpeg':
    echo $filename = md5(time().uniqid()).".jpg";
    $returnVal=true;
    break;
  case 'image/png':
    echo $filename = md5(time().uniqid()).".png";
    $returnVal=true;
    break;
  //case 'url/external':
  case 'text/plain':
    echo $filename = md5(time().uniqid()).".txt";
    $returnVal=true;
    break;
  case 'application/pdf':
    echo $filename = md5(time().uniqid()).".pdf";
    $returnVal=true;
    break;
  case 'video/mpeg':
    echo $filename = md5(time().uniqid()).".mpg";
    $returnVal=true;
    break;
  case 'video/x-mpeg':
    echo $filename = md5(time().uniqid()).".xmpeg";
    $returnVal=true;
    break;
  //case 'video/x-flv':
  case 'video/quicktime':
    echo $filename = md5(time().uniqid()).".mov";
    $returnVal=true;
    break;
  case 'video/mpeg-4':
    echo $filename = md5(time().uniqid()).".mp4";
    $returnVal=true;
    break;
  case 'video/mp4':
    echo $filename = md5(time().uniqid()).".mp4";
    $returnVal=true;
    break;
    break;
  default:
    $returnVal=false;
    break;
}

file_put_contents("uploads/".$filename,$str);
// In demo version i delete uplaoded file immideately, Please remove it later
//unlink("uploads/".$filename);
//file_put_contents("uploads/files.txt",var_export($_REQUEST,true));
?>

您需要先访问该链接并下载该内容，然后应用替换内容。我没有在这里提供一切。

如何创建多个拖放文件上传，使用进度条使用php＆amp; JavaScript的？

1 个答案: