在React.js中實現拖放上傳：react-dropzone
簡單的HTML5拖放上傳文件在React.js中。
示例: http://paramaggarwal.github.io/react-dropzone/
安裝
The easiest way to use react-dropzone is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm install --save react-dropzone
用法
Simplyrequire('react-dropzone')and specify anonDropmethod that accepts an array of dropped files. You can customize the content of the Dropzone by specifying children to the component.
You can specify astyleobject to apply some basic styles to theDropzonecomponent, or alternatively use theclassNameproperty to style the component with custom CSS.
If nostyleorclassNameproperties are defined, the style object will default to thewidthandheightproperties (or100pxif they aren't defined) along with aborderStyleof "solid" or "dashed" depending on if drag actions are taking place.
You can alternatively specify asizeproperty which is an integer that sets bothstyle.widthandstyle.heightto the same value.
By default the drop zone can be clicked to bring up the browser file picker. To disable this thesupportClickproperty should be set tofalse.
Also multiple files can be uploaded to the drop zone, but this can be disabled by setting themultipleproperty tofalse. The allowed file types can be controlled by theacceptproperty, using the same syntax as the HTML accept Attribute.
示例
/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');
var DropzoneDemo = React.createClass({
onDrop: function (files) {
console.log('Received files: ', files);
},
render: function () {
return (
<div>
<Dropzone onDrop={this.onDrop} width={150} height={100}>
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
</div>
);
}
});
React.render(<DropzoneDemo />, document.body);