16

これは ReactJS の初心者です。

何を使用するか、または React にフォーム (いくつかの入力ボックスとファイル セレクターを含む) をアップロードする方法についてアドバイスをいただけますか?

BlueImp JQuery-file-upload pluginを使用しようとして神経をすり減らしてきました。エラー メッセージは不可解であり、Google から有用なヘルプを得ることができませんでした。

私のコードは次のとおりです。

<form id="myForm" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
  <input type="text" name="name">
  <input type="text" name="lastName">
  <input type="file" accept="image/*" name="myPic">
</form>

// Inside handleSubmit() of my component
$('#myForm").fileupload('add', {url: "myurl"});

ありがとう！

4

5 に答える 5

14

React 内で jQuery プラグインを使用することは合理的ですが、React は独自の DOM の仮想表現を保持するため、jQuery セレクターの使用を避ける必要があります。

フォームが送信されたときにイベント ターゲットを使用して実際の DOM ノードへの参照を取得し、それを jQuery オブジェクトでラップしてプラグインにアクセスします。

React.createClass({
  handleSubmit: function(event) {
    $(event.target).fileupload('add', {url: "myurl"});
  },
  render: function() {
    return (
      <form enctype="multipart/form-data" onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="text" name="lastName" />
        <input type="file" accept="image/*" name="myPic" />
      </form>
    );
  }
});
于 2014-03-05T16:42:41.263 に答える
11

BlueImp を試してみましたが、あきらめて、ここから変更されたソリューションを使用してそれを実行しています:

/** @jsx React.DOM */

var FileForm = React.createClass({
    getInitialState: function() {
        return {data_uri: null}
    },
    handleSubmit: function() {
        $.ajax({
            url: url,
            type: "POST",
            data: this.state.data_uri,
            success: function(data) {
                // do stuff
            }.bind(this),
            error: function(xhr, status, err) {
                // do stuff
            }.bind(this)
        });
        return false;
    },
    handleFile: function(e) {
        var reader = new FileReader();
        var file = e.target.files[0];

        reader.onload = function(upload) {
            this.setState({
                data_uri: upload.target.result
            }, () => console.log(this.state.data_uri));

        }.bind(this);

        reader.readAsDataURL(file);
    },
    render: function() {
        return (
            <form onSubmit={this.handleSubmit} encType="multipart/form-data">
                <input type="file" onChange={this.handleFile} />
                <input type="submit" value="Submit />
            </form>

        );
    }
});

そこから、エンドポイントはそれを処理できるはずです。

于 2014-07-29T18:33:36.653 に答える
10

ReactJS で BlueImp JQuery-file-upload プラグインを使用するには、replaceFileInputオプションを false に設定する必要があります。これは、replaceFileInputが true (デフォルト) の場合、新しいファイルが選択されるたびに BlueImp が file 入力要素を新しいものに置き換えるためです.. これは ReactJS が好まないことです。

これについては、https: //groups.google.com/d/msg/reactjs/lXUpL22Q1J8/-ibTaq-OJ6cJから見つけました 。

ここのドキュメントを参照してreplaceFileInputください: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#replacefileinput

于 2014-10-14T09:53:31.720 に答える
0

これが私のものです：

複数のファイルを処理するように変更したり、jQuery の代わりにネイティブ XHR を使用したりするのは簡単です。

var FileUpload = React.createClass({
  handleFile: function(e) {
      var file = e.target.files[0];
      var formData = new FormData();
      formData.append('file',  file, file.name);
      $.ajax({
        url: URL,
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data) {
          console.log('success', data);
        },
        error: function() {
          console.error('error uploading file');
        },
      });
    },
    render: function() {
      return (
        <input className="btn btn-default btn-file" type="file" onChange={this.handleFile} accept="image/*;capture=camera"/>
      );
    }
});
于 2014-12-23T02:12:23.217 に答える