2016-04-14 23 views
1

Dosya yükleme ve başka bir klasör konumuna kaydetme için PHP komut dosyasını tetiklemek için React yazılımını kullanmaya çalışıyorum. Bunu normal HTML/PHP ile yapabilirdim ancak tepkiyi kullanarak yapmaya çalıştığımda aşağıdaki hatayı alıyorum. Bunun için kodun tamamı aşağıdadır. Eğer herkes ona bakıp bana rehberlik ederse, çok takdir edilecektir.Dosya Yükleme hatası - PHP ve React

<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 Dosya:

<?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!"; 
} 
?> 

Hata: $_FILES neden boş olduğunu Dosya yükleyerek değiliz

!) 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 

cevap

1

, bu.

ile bir dosya yüklemek için nasıl here alınan bu örneğe bakın tepki:

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> 
} 

Alternatif olarak, oluşturulacak normal formu şeyi yapabilecek Tepki:

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

ben bu koymak gereken yerde kodumda iade komutu Bir tanıtıcı gönderme işlevim var zaten, bunun yerine onu kaldırabilir miyim? –

+0

'render()' işlevinizde. 'OnSubmit' öğesini kaldırabilirsiniz, evet – damio

+0

Hala aynı hatayı alıyorum! –