Question

Plz使用谷歌关闭（单个文件和多个文件）来上传文件。我在服务器端使用spring mvc controller来保存文件。

我浏览了关于stackoverflow的this文章，但是那里提到的网址已经过时了。如果您已经处理过，请分享代码段或任何示例。

Answer 1

通常，文件上载使用文件类型的输入标记。旧学校的这种方式涉及使用标签向服务器发布请求。但我假设您使用的是ajax，因此执行此操作的方法要求您必须编写将数据发送到服务器的javascript：

这篇mdn文章是我实施此文章的指南：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

这里的难点部分是多浏览器支持以及您希望如何将文件传送到服务器。

您可以将二进制blob发送到服务器，也可以发送数据uri。但获得方式的方法有浏览器支持问题。

如果文件很小，数据uri很容易发送，你可以在服务器上对它进行解码。

我建议使用FileReader对象并在文件输入上侦听更改事件。

以下是封装文件输入标记的Component的示例。

goog.provide('my.FileThing');

goog.require('goog.dom');
goog.require('goog.ui.Component');

/** @constructor */
my.FileThing = function() {};
goog.inherits(my.FileThing, goog.ui.Component);

my.FileThing.prototype.createDom = function() {
  this.setElementInternal(goog.dom.createDom('input', {'type':'file'});
};

my.FileThing.prototype.enterDocument = function() {
    goog.base(this, 'enterDocument');
    this.getHandler().listen(
       this, goog.events.EventType.CHANGE, this.onChange
    );
};

/**
* @param {goog.events.BrowserEvent} event the CHANGE event.
*/
my.FileThing.prototype.onChange = function(event) {
   var files = this.getElement().files;
   if (files.length == 0) { return; } // no files!
   var reader = new FileReader();
   reader.onload = goog.bind(this, this.onLoad);
   reader.readAsBinaryString(files)
};

/**
 * @param {goog.events.BrowserEvent} event the LOAD event.
 */
my.FileThing.prototype.onLoad = function(event) {
   var data = event.target.result;
   // construct xhr event xhr.sendAsBinary(event.target.result); ....
};

//////////////// THEN ELSEWHERE
var fileThing = new my.FileThing();
fileThing.render();  // or blahComponent.addChild(fileThing, true);

Answer 2

使用谷歌关闭有很多方法可以做到这一点。你可以使用XhrIo 功能。见the closure Developers documentation。另一种选择是使用

另一种方法是使用IFramIO对象。以下示例来自O＆＃39; Reilly＆＃34; Closure：The Definitive Guide＆＃34;

<form id="some_form" enctype="multipart/form-data" method="POST"
      action="http://www.example.com/upload_handler">
  <input id="some_file" name="some_file" type="file">
</form>

<div id="status"></div>

<script>
  var uploadForm = /** @type {HTMLFormElement} */ (
    goog.dom.getElement('some_form'));
    var fileInput = goog.dom.getElement('some_file');

    var doUpload = function(e) {
      updateStatus('Uploading ' + fileInput.value + '...');

      var iframeIo = new goog.net.IframeIo();
      goog.events.listen(iframeIo, goog.net.EventType.COMPLETE, onComplete);
      iframeIo.sendFromForm(uploadForm);
    // For simplicity, disable the input while uploading.
    fileInput.disabled = true;
  };

  var onComplete = function(e) {
    var iframeIo = /** @type {goog.net.IframeIo} */ (e.target);
    var file = fileInput.value;
    if (iframeIo.isSuccess()) {
      updateStatus('Finished uploading ' + file);
    } else {
      updateStatus('Failed to upload ' + file);
    }
    fileInput.disabled = false;
    iframeIo.dispose();
  };

// Listening for the onchange event will not work on older versions of
// Firefox. In that case, a click listener should be added to the input
// that polls for changes to its value.
goog.events.listen(fileInput,
                   goog.events.EventType.CHANGE,
                   doUpload);

var updateStatus = function(status) {
  goog.dom.setTextContent(goog.dom.getElement('status'), status);
};
</script>

使用谷歌关闭文件上传

2 个答案: