文件上传（前端）

并非原创：

<!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"/>&nbsp;&nbsp;&nbsp;&nbsp;'
              + '<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

参考案例：

已经上传到博客园中的文件中：jQuery-File-Upload-master2.zip

需要用python 在cmd中启动服务：http://www.cnblogs.com/hy928302776/articles/6937949.html

posted on 2017-05-23 19:29 世界之大追梦者阅读(292) 评论(0) 收藏举报

刷新页面返回顶部

艺术家

文件上传（前端）

导航

公告