代码之家 › 专栏 › 技术社区 › Nifle Hassan Syed

强大的javascript是否只能上载文件?

file-upload javascript

Nifle Hassan Syed · 技术社区 · 16 年前

我想要一个上传文件的强大方法。这意味着我希望能够处理中断、错误和暂停。

所以我的问题是: 是否可以仅在客户端上使用javascript .

如果是这样,我希望指向库、教程、书籍或实现的指针。如果没有,我想解释一下为什么不可能。

脚本:

打开一个大文件

把它分成几部分

每一部分我都想

创建校验和并附加到数据

将数据发布到服务器 (服务器将检查数据是否正确上载)

检查服务器上的网页,查看是否可以上载

如果是,请上传下一部分如果否,请重试

假设所有发送到服务器的邮件都带有相关的元数据( sessionid和其他什么 )

4 回复 | 直到 15 年前

VoteyDisciple 16 年前

不。您可以通过一定数量的黑客,使用Ajax开始文件上传,在这种情况下,您可以知道文件上传完成的时间。就是这样。

出于安全原因,javascript不能直接访问访问者计算机上的文件。从脚本中可以看到的最多的是文件名。

kangax 16 年前

火狐3.5增加了对 DOM progress event monitoring of XMLHttpRequest transfers 至少能让你了解 上载状态 以及完成和取消上传的。

在不支持此更新版本的客户端中,还可以使用iframes模拟进度跟踪。 XMLHTTPRequest 添加。

对于只执行此操作的脚本示例,请查看 NoSWFUpload .我已经成功使用它几个月了。

bobince 16 年前

在firefox 3中,可以打开文件上传字段选择的本地文件,并使用该字段的 files array . 这将允许您通过Ajax进行自己的分块、哈希和发送。

有人说要让W3实现这种标准化,但在不久的将来,没有其他浏览器支持这种标准化。

bmarti44 15 年前

对。请看下面的文件-

function Upload() {

  var self = this;

  this.btnUpload;

  this.frmUpload;

  this.inputFile;

  this.divUploadArea;

  this.upload = function(event, target) {
    event.stopPropagation();

    if (!$('.upload-button').length) {
      return false;
    }

    if (!$('.form').length) {
      return false;
    }  

    self.btnUpload = target;
    self.frmUpload = $(self.btnUpload).parents('form:first');
    self.inputFile = $(self.btnUpload).prev('.upload-input');
    self.divUploadArea = $(self.btnUpload).next('.uploaded-area');

    var target = $(self.frmUpload).attr('target');
    var action = $(self.frmUpload).attr('action');

    $(self.frmUpload).attr('target', 'upload_target'); //change the form's target to the iframe's id
    $(self.frmUpload).attr('action', '/trnUpload/upload'); //change the form's action to the upload iframe function page
    $(self.frmUpload).parent("div").prepend(self.iframe);

    $('#upload_target').load(function(event){

      if (!$("#upload_target").contents().find('.upload-success:first').length) {
        $('#upload_target').remove();
        return false;
      } else if($("#upload_target").contents().find('.upload-success:first') == 'false') {
        $('#upload_target').remove();
        return false;  
      }

      var fid = $("#upload_target").contents().find('.fid:first').html();
      var filename = $("#upload_target").contents().find('.filename:first').html();
      var filetype = $("#upload_target").contents().find('.filetype:first').html();
      var filesize = $("#upload_target").contents().find('.filesize:first').html();

      $(self.frmUpload).attr('target', target); //change the form's target to the iframe's id
      $(self.frmUpload).attr('action', action); //change the form's  
      $('#upload_target').remove();

      self.insertUploadLink(fid, filename, filetype, filesize);
    });

  };

  this.iframe = '' +
                'false' +
                '';

  this.insertUploadLink = function (fid, filename, filetype, filesize) {
    $('#upload-value').attr('value', fid);

  }

}

$(document).ready(event) {
  var myupload = new Upload();  
  myupload.upload(event, event.target);
}

还可以使用php的apc查询文件上载多少的状态,您可以使用定期更新程序执行进度条(我将使用jquery,这也是上述类所要求的)。可以使用php在临时创建的iframe中输出定期结果和上载结果。

这是黑客行为。你需要花很多时间让它工作。您需要管理员访问您想要运行它的任何服务器,以便安装APC。您还需要设置HTML表单以对应于JS上载类。有关如何执行此操作的参考信息,请参见 http://www.ultramegatech.com/blog/2008/12/creating-upload-progress-bar-php/