表单中的单文件点击和拖拽上传

最新推荐文章于 2022-11-17 10:44:12 发布

asd386322349

最新推荐文章于 2022-11-17 10:44:12 发布

阅读量523

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/Sabo-dudu/p/7245156.html

版权

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

<!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

　　效果图：

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

转载于:https://www.cnblogs.com/Sabo-dudu/p/7245156.html

asd386322349

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单中的单文件点击和拖拽上传

　　在项目中碰到的提交表单时单文件的上传，整理总结：　　<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文件上传</title> <style media="screen"> ...
复制链接

扫一扫