文件上传（前端）
并非原创：
<!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" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
经过改良：
js代码：
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'; var fileDiv= '<label for="disabledSelect" class="col-sm-1 control-label text-right"></label>' + '<div class="col-lg-10">' + '<div class="well">' + '<div class="form-group" id="Daily">' + '<div class="col-sm-4">' + '<div id="fileName"></div> ' + '</div>' + '<div class="col-sm-3">' + '<div id="fileSize"></div> <br/>' + '<div id="bar">' + '<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' + '<div class="progress-bar progress-bar-success" id="progressNumber" style="width:0%;"></div>' + '</div>' + '</div>' + '</div>' + '<div class="col-sm-2">' + '<div id="fileType"></div> ' + '</div>' + '<div class="col-sm-2">' + '<input type="button" id="doSub" class="btn btn-primary start" onclick="uploadFile()" value="Upload"/> ' + '<input type="button" class="btn btn-warning cancel" onclick="cancelFile(1)" value="Cancel" />' + '</div>' + '<div class="col-sm-1">' + '<div id="res"></div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' $("#file1").html(fileDiv); document.getElementById('fileName').innerHTML = file.name; document.getElementById('fileSize').innerHTML = fileSize; document.getElementById('fileType').innerHTML = file.type; } } function cancelFile(id) { $("#file" + id).html(""); $("#bin_file_uri").val(''); } function uploadFile() { var fd = new FormData(); fd.append("file", 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", '${root}' + "/mrTask/upload"); xhr.send(fd); $("#doSub").attr("disabled",true); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); // document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; $("#progressNumber").css("width",percentComplete.toString() + '%'); } else { // document.getElementById('progressNumber').innerHTML = 'unable to compute'; $('#bar').html('<font color="red"><b>unable to compute</b></font>'); } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ $("#bin_file_uri").val(evt.target.responseText); $('#res').html('<font color="green"><b>成功</b></font>'); } 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."); }
jsp代码：
<div class="form-group" id="fileGroup"> <label for="disabledSelect" class="col-sm-2 control-label text-right">流程代码：</label> <div class="col-lg-8"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>添加文件</span> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> <input type='hidden' name='bin_file_uri' id='bin_file_uri' value='' /> </span> </div> </div> <div class="form-group" id="file1"> </div>
效果图：
所用样式：bootstrap
<link rel="stylesheet" href="${root }/resources/js/jQuery-File-Upload-master/css/jquery.fileupload.css">
<link rel="stylesheet" href="${root }/resources/js/jQuery-File-Upload-master/css/jquery.fileupload-ui.css">
参考案例：
已经上传到博客园中的文件中：jQuery-File-Upload-master2.zip
需要用python 在cmd中启动服务：http://www.cnblogs.com/hy928302776/articles/6937949.html
