zoukankan      html  css  js  c++  java
  • 表单中的单文件点击和拖拽上传

      在项目中碰到的提交表单时单文件的上传,整理总结:

      

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>文件上传</title>
        <style media="screen">
        .wrap{
          width: 450px;
          height: 450px;
          border: 1px solid black;
          margin: 100px auto;
          padding: 20px;
        }
        .file-name{
    
        }
        .progressNumber{
          width: 80%;
          height: 20px;
          background: #ccc;
          margin: auto;
          border-radius: 10px;
          text-align: center;
        }
        .file-wrap{
          position: relative;
          width: 80%;
          margin: 30px auto;
        }
        .file-div{
          position: absolute;
          left: 36%;
          z-index: 50;
        }
        .fileInputP{
          display: inline-block;
          width: 120px;
          height: 30px;
          border-radius: 5px;
          overflow: hidden;
          position: relative;
        }
        .fileInputP span{
          display: inline-block;
          width: 110px;
          height: 30px;
          color: #fff;
          background: #0e90d2;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          border-radius: 5px;
    
        }
        .fileInputP input{
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
        }
        #fileSpan{
          display: inline-block;
          width: 100%;
          height: 150px;
          border: 2px dashed #ccc;
          text-align: center;
          line-height: 100px;
          position: relative;
        }
        .file{
          position: relative;
        }
        .updata{
          cursor: pointer;
          color: #142ae4;
          font-weight: bold;
          position: absolute;
          right: 30px;ß
        }
        </style>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      </head>
      <body>
      <div class="wrap">
        <div class="file">
          <p>
            <span>文件上传:</span>
            <span class="file-name"></span>
            <span class="updata">上传</span>
          </p>
          <p class="progressNumber" id="progressNumber"> 我是进度条 </p>
        </div>
        <div class="file-wrap">
          <div class="file-div">
            <p class="fileInputP">
                <span>选择文件</span>
                <input type="file" multiple id="fileInput" />
            </p>
          </div>
    
          <span id="fileSpan">
              <p class="span-p">或者将文件拖到此处</p>
          </span>
        </div>
      </div>
      </body>
      <script type="text/javascript">
        var fileobj; // 文件对象
        $("#fileInput").on("change",function(){
          // 当前所选文件
          fileList(this.files);
        });
        // 拖拽外部文件,进入目标元素触发 dragenter 用户开始拖动元素时触发
        $("#fileSpan").on("dragenter",function(){
          $(this).css("background","#ccc");
          $(".span-p").text('可以释放鼠标了');
        });
        //拖拽外部文件,进入目标,离开目标,防止连续触发
        //ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        $("#fileSpan").on("dragover",function(){
          return false;
        });
        //拖拽外部文件,离开目标元素触发
        //ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
        $("#fileSpan").on("dragleave",function(){
          $(this).css("background","none");
          $(".span-p").text("或者将文件拖到此处!");
        });
        //ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
        $("#fileSpan").on("drop",function(e){
          //HTML5的File API提供了一个FileList的接口,它
          // 可以通过拖拽事件的e.dataTransfer.files来传递的文件信息,获取本地文件列表信息。
          var file = e.originalEvent.dataTransfer.files;
          fileList(file);
          $(this).css("background", "none");
            return false;
        });
    
        function fileList(obj){
          // 如果没有文件
          if(obj.length < 1){
            return false;
          }else if(obj.length > 1){
            $("#fileSpan").text("每次只能上传一个文件!");
          }else {
            $("#fileSpan").text("或者将文件拖到此处!");
          }
          fileObj = obj[0]; // 获取当前的文件对象
          var name = obj[0].name;
    
          $(".file-name").html(name);
        }
    
        // 点击文件上传的方法
        function uploadFileFun(){
          var fd = new FormData(); // 定义fromdata对象
          fd.append("file",fileObj); // 传给后台的参数 “file” 参数名 fileObj 文件对象
          /**
          可以通告append 方法在 FormData对象里面添加参数
          //fd.append("fileOid",fileOid);
          // 可以在添加参数,fileOid是后台返回的,判断当前上传的文件是第几次上传的,第一次 传空字符串
          XMLHTTPRequest 对象,有progress 事件,用来返回进度信息
          -- 下载的progress 事件属于XMLHTTPRequest 对象
          -- 上传的progress 事件属于 XMLHTTPRequest.upload 对象
          **/
          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.addEventListener("loadstart", " 我是函数名 ",false); // 传输开始
          // xhr.addEventListener("loadEnd", " 我是函数名 ",false); // 传输结束,但是不知道是否成功
          xhr.open("POST", "/file/upload_file"); // 给后台提交的路径
          xhr.send(fd);
        }
        // 传输进度的方法 进度条显示
        function uploadProgress(evt) {
            if (evt.lengthComputable) {
              //evt.total 需要传输的总字符,evt.loaded 是已经上传的字节
              // if evt.lengthComputable 不为真  evt.total 等于 0
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                // 上传的进度状态
                $('#progressNumber').progressbar('setValue', percentComplete);
            }
            else {//大小无法计算
                document.getElementById('progressNumber').innerHTML = "大小无法计算";
            }
        }
        //传输成功的方法
        function uploadComplete(evt){
          //服务器返回的数据
          var message = JSON.parse(evt.target.responseText);
          if(message.code == "success"){ // 后台返回的code值
            alert("上传成功!");
          }else if(message.code == "fail"){
            alert("上传失败!");
          }
        }
        // 传输中出现错误
        function uploadFailed(evt){
          alert("删除出错!");
        }
        // 上传由用户或者浏览器取消链接
        function uploadComplete(evt){
          alert("上传由用户或者浏览器取消链接");
        }
      </script>
    </html>
    View Code

      效果图:

          

      

    这个就是单个文件上传的方法,如果想要多文件上传,可以看看我的另一篇文章,希望大家多提意见!

  • 相关阅读:
    Oracle建立表空间和用户
    fscanf()函数具体解释
    三层架构(我的理解及具体分析)
    ListView嵌套ListView优化
    Android xml 解析
    玩转Web之servlet(三)---一张图看懂B/S架构
    jquery.scrollTo-min.js
    C#中MessageBox使用方法大全(附效果图)
    hdu 1882 Strange Billboard(位运算+枚举)
    MySQL 通配符学习小结
  • 原文地址:https://www.cnblogs.com/Sabo-dudu/p/7245156.html
Copyright © 2011-2022 走看看