2016-04-14 8 views
1

Reactを使用して、ファイルをアップロードして別のフォルダの場所に保存するためのPHPスクリプトを起動しようとしています。私は通常のHTML/PHPを介してそれを行うことができますが、私は反応を使用してそれをしようとすると、私は次のエラーが表示されます。以下はそのためのコード全体です。誰もがそれを見て、これを通して私を導くことができれば、それは高く評価されるだろう。ファイルのアップロードエラー - PHPと反応

<body> 
<div id="container" class="center" > 
<!-- This element's contents will be replaced with your component. --> 
</div> 
<script type="text/jsx"> 
var Form = React.createClass({ 
    getInitialState() { 
     return { 
      fileInput: "", 
     }; 
    }, 

    _onFileChange: function (event) { 
     this.setState({fileInput: event.target.value}); 
    }, 

    handleSubmit(event) { 
     event.preventDefault(); 
     var data = this.state; 
     $.ajax({ 
      type: "POST", 
      crossDomain: true, 
      url: "http://localhost:8082/PFT/uploads.php", 
      data: data, 
      success: function(data){ 
       alert(data); 
       $('#para').html(data); 
      }, 
      error:function(data) 
      { 
       alert("Data sending failed"); 
      } 
     }); 
    }, 

    render() { 
     return (
       <form onSubmit={this.handleSubmit}> 

        <input id="fileInput" name="fileInput" type="file" value={this.state.fileInput} onChange={this._onFileChange} /> 
        <button type="submit">Submit</button><br/><br/><br/> 
        <paragraph id="para" color="red"> Result will be printed here </paragraph> 
       </form> 

     ) 
    } 
}); 

React.render(<Form />, document.getElementById('container')); 
</script> 
</body> 

PHPファイル:

<?php header('Access-Control-Allow-Origin: *'); 

    $target_path = "uploads/"; 

$target_path = $target_path . basename ($_FILES['fileInput']['name']); 

if(move_uploaded_file ($_FILES['fileInput']['tmp_name'], $target_path)) { 
    echo "The file ". basename ($_FILES['fileInput']['name']). 
    " has been uploaded"; 
} else{ 
    echo "There was an error uploading the file, please try again!"; 
} 
?> 

がエラー:

!) Notice: Undefined index: fileInput in C:\wamp\www\PFT\uploads.php on line 5 
    Call Stack 
    # Time Memory Function Location 
    1 0.0010 242344 {main}() ..\uploads.php:0 

答えて

1

をあなたの$_FILESが空である理由です、ファイルをアップロードしていません。

でファイルをアップロードする方法についてはhereから取られたこの例を参照してください反応:

uploadfile: function(){ 
    var file = this.refs.file.getDOMNode().files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(output){ 
    fileUpload.set({ 
     file: output.target.result 
    }); 
    fileUpload.save(); 
    }.bind(this)); 

    reader.readAsDataURL(file); 
}, 
render: function(){ 
    <form onSubmit={uploadFile}> 
    <input type="file" name="file" ref="file" defaultValue={this.state.file} /><br /> 
    <input type="submit" /> 
    </form> 
} 

また、あなたが生成され、通常のフォームを行うだけでできリアクト:

return (<form action="uploads.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="fileInput"> 
    <input type="submit" value="Upload"> 
</form>); 
+0

を私はこれを置くべき場所私のコードでreturnコマンド?私は既に機能を提出するハンドルが、私はこれの代わりに削除できますか? –

+0

'render()'関数にあります。あなたは 'onSubmit'を削除することができます、はい – damio

+0

私はまだ同じエラーが発生します! –

関連する問題