新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行 html页面 !DOCTYPE html PUBLIC -//W3C//DTDXHTML1.0Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv= Content-Type content= text/htm
新标准的XMLHttpRequest支持上传文件,但是不支持html5的浏览器不行
html页面
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns= "http://www.w3.org/1999/xhtml"> < head> < meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> < title>Upload Files using XMLHttpRequest - Minimal< /title> < script type= "text/javascript"> function fileSelected() { var file = document.getElementById( 'fileToUpload').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = ( Math.round(file.size * 100 / (1024 * 1024)) / 100). toString() + 'MB'; else fileSize = ( Math.round(file.size * 100 / 1024) / 100). toString() + 'KB'; document.getElementById( 'fileName').innerHTML = 'Name: ' + file.name; document.getElementById( 'fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById( 'fileType').innerHTML = 'Type: ' + file.type; } } function uploadFile() { var fd = new FormData(); fd.append( "fileToUpload", document.getElementById( 'fileToUpload').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener( "progress", uploadProgress, false); xhr.addEventListener( "load", uploadComplete, false); xhr.addEventListener( "error", uploadFailed, false); xhr.addEventListener( "abort", uploadCanceled, false); xhr.open( "POST", "test2.php"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById( 'progressNumber').innerHTML = percentComplete. toString() + '%'; } else { document.getElementById( 'progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert( "There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert( "The upload has been canceled by the user or the browser dropped the connection."); } < /script> < /head> < body> < form id= "form1" enctype= "multipart/form-data" method= "post" action= "upload.php"> < div class= "row"> < label for= "fileToUpload">Select a File to Upload< /label> < input type= "file" name= "fileToUpload" id= "fileToUpload" οnchange= "fileSelected();" /> < /div> < div id= "fileName">< /div> < div id= "fileSize">< /div> < div id= "fileType">< /div> < div class= "row"> < input type= "button" οnclick= "uploadFile()" value= "Upload" /> < /div> < div id= "progressNumber">< /div> < /form> < /body> < /html>