我正在尝试使用React来触发PHP脚本上传文件并将其保存在另一个文件夹位置。我可以通过普通的HTML/PHP来完成，但当我尝试使用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文件：
<?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
您没有上传文件，这就是$_FILES为空的原因。
请参阅以下示例，了解如何使用react:上传文件
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>
}
或者，您也可以使用React生成一个普通表单：
return (<form action="uploads.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileInput">
<input type="submit" value="Upload">
</form>);