上传拖放图像javascript并用php保存

Question

i need to do a drag and drop image uploader. I have this code, but i'm not sure what it's doing.

 HTML
        <div id="drop_zone" style="width: 100%; height: 200px; "></div>
        <output id="list"></output>

JavaScript

        function ManejadorDeArchivosSeleccionados(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var files = evt.dataTransfer.files;
            var output = [];
            for(var i = 0, f; f = files[i]; i++) {
                output.push('<li><strong>', escape(f.name),'</strong> (', f.type || 'n/a',') - ',f.size, 'bytes, last modified ', f.lastModifiedDate.toLocaleDateString(), '</li>');
            }
            document.getElementById('list').innerHTML = '<ul>' + output.join(' ') + '</ul>';


        }         


        function ManejadorDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        var dropZone = document.getElementById('drop_zone');
        dropZone.addEventListener('dragover',ManejadorDragOver,false);
        dropZone.addEventListener('drop',ManejadorDeArchivosSeleccionados,false);

The output is alright it prints the name, type size and date of the file, but i don't know hot to save it in a folder. I know i have to use POST or ajax i just don't what to send and how to send to php for saving it.

Answer 1

You can use FormData and XmlHttpRequest2, both supported by all major browsers (ie10+).

     var files = evt.dataTransfer.files;
     var data = new FormData();
     for( var i = 0, l=fields.length; i<l; i++ ){
         var f = files[i];
         data.append( "files["+i+"][file]", f, f.name ); 
         data.append( "files["+i+"][name]", f.name ); #for ie 
     }
     var req = new XMLHttpRequest(); 
     req.open( 'POST', '/ajax.php', true );
     req.onreadystatechange = function(){
        if( req.readyState !== 4 ) return;
        console.log('all files sended');
     }.bind( this );
     req.send( data );