当前位置:首页 > Javascript技术文章 > JS实现可视化文件上传

JS可视化文件上传的实例方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:177

这篇文章主要知识点是关于js、文件上传、js实现文件上传功能 后台使用MultipartFile 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

JavaScript函数式编程指南

这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码,以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的,这一部分引入了对函数式

查看详情

JS实现可视化文件上传

本文实例为大家分享了JS可视化文件上传的具体代码,供大家参考,具体内容如下

测试-Style

<style type="text/css">
    .imgbox,.imgbox1
    {
      position: relative;
      width: 200px;
      height: 180px;
      border: 1px solid #ddd;
      overflow: hidden;
    }
 
    .imgnum{
      left: 0px;
      top: 0px;
      margin: 0px;
      padding: 0px;
    }
    .imgnum input,.imgnum1 input {
      position: absolute;
      width: 200px;
      height: 180px;
      opacity: 0;
    }
    .imgnum img,.imgnum1 img {
      width: 100%;
      height: 100%;
    }
    .close,
    .close1 {
      color: red;
      position: absolute;
      right: 10px;
      top: 0;
      display: none;
    }
</style>

测试--HTML

<div id="img">
 
 <div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
 </div>
 
</div>

JS: 需要引入jquery

<script type="text/javascript">
  $(function() {
    $(".filepath").on("change",function() {
      var srcs = getObjectURL(this.files[0]);  //获取路径
      $(this).nextAll(".img1").hide();     //this指的是input
      $(this).nextAll(".img2").show();     //fireBUg查看第二次换图片不起做用
      $(this).nextAll('.close').show();     //this指的是input
      $(this).nextAll(".img2").attr("src",srcs);  //this指的是input
      $(this).val('');               //必须制空
      $(".close").on("click",function() {
        $(this).hide();             //this指的是span
        $(this).nextAll(".img2").hide();
        $(this).nextAll(".img1").show();
      })
    })
  })
 
 
 
//关键代码:getObjectURL return url
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file)
    }
    return url
  };
 

//modify img
  $(function() {
    $("#img").on("change",".filepath1",function() {
      //alert($('.imgbox1').length);
      var srcs = getObjectURL(this.files[0]);  //获取路径
      alert(srcs);
      //this指的是input
      /* $(this).nextAll(".img22").attr("src",srcs);  //this指的是input
       $(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/
      var htmlImg='<div class="imgbox1">'+
          '<div class="imgnum1">'+
          '<input type="file" class="filepath1" />'+
          '<span class="close1">X</span>'+
          '<img src="btn.png" class="img11" />'+
          '<img src="'+srcs+'" class="img22" />'+
          '</div>'+
          '</div>';
 
      $(this).parent().parent().before(htmlImg);
      $(this).val('');            //必须制空
      $(this).parent().parent().prev().find(".img11").hide();  //this指的是input
      $(this).parent().parent().prev().find('.close1').show();
 
      $(".close1").on("click",function() {
        $(this).hide();          //this指的是span
        $(this).nextAll(".img22").hide();
        $(this).nextAll(".img11").show();
        if($('.imgbox1').length>1){
          $(this).parent().parent().remove();
        }
 
      })
    })
  })
 
</script>

注:低版本IE不支持可视化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

js实现文件上传功能 后台使用MultipartFile

本文为大家分享了js实现文件上传功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>XMLHttpRequest上传文件</title>
  <script type="text/javascript">
    //图片上传
    var xhr;
    //上传文件方法
    function UpladFile() {
      var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
      var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址
 
      var form = new FormData(); // FormData 对象
      form.append("file", fileObj); // 文件对象
 
      xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
      xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
      xhr.onload = uploadComplete; //请求完成
      xhr.onerror = uploadFailed; //请求失败
 
      xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
      xhr.upload.onloadstart = function(){//上传开始执行方法
        ot = new Date().getTime();  //设置上传开始时间
        oloaded = 0;//设置上传开始时,以上传的文件大小为0
      };
 
      xhr.send(form); //开始上传,发送form数据
    }
 
    //上传成功响应
    function uploadComplete(evt) {
      //服务断接收完文件返回的结果
 
      var data = JSON.parse(evt.target.responseText);
      if(data.success) {
        alert("上传成功!");
      }else{
        alert("上传失败!");
      }
 
    }
    //上传失败
    function uploadFailed(evt) {
      alert("上传失败!");
    }
    //取消上传
    function cancleUploadFile(){
      xhr.abort();
    }
 
 
    //上传进度实现方法,上传过程中会频繁调用该方法
    function progressFunction(evt) {
      var progressBar = document.getElementById("progressBar");
      var percentageDiv = document.getElementById("percentage");
      // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
      if (evt.lengthComputable) {//
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
      }
      var time = document.getElementById("time");
      var nt = new Date().getTime();//获取当前时间
      var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s
      ot = new Date().getTime(); //重新赋值时间,用于下次计算
      var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
      oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
      //上传速度计算
      var speed = perload/pertime;//单位b/s
      var bspeed = speed;
      var units = 'b/s';//单位名称
      if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
      }
      if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
      }
      speed = speed.toFixed(1);
      //剩余时间
      var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
      time.innerHTML = ',速度:'+speed+units+',剩余时间:'+resttime+'s';
      if(bspeed==0) time.innerHTML = '上传已取消';
    }
  </script>
</head>
<body>
<progress id="progressBar" value="0" max="100" ></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JavaScript中的call、apply方法、 让JS验证密码不能为空的实、 echarts中箱线图的分析与绘、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:如何解决webpack配置打包后图片路径出错

下一篇:canvas轨迹回放功能的实现代码和方法

展开 +

收起 -

JS可视化文件上传 相关内容
nodejs中间层实现文件上传的方法

这篇文章主要介绍了node中间层实现文件上传功能,本文给大家介绍的非常详细,需要的朋友可以参考下

查看详情
大型JavaScript应用最佳实践指南 查看详情
精通JavaScript

精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

查看详情
JavaScript权威指南 查看详情
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
Web前端开发精品课 JavaScript基础教程

《JavaScript基础教程》 共分为2大部分,第1部分是JavaScript基础知识,主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识,主要学习DOM、事件操作以及各种开发技

查看详情
JavaScript网页动画设计

JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

查看详情
21天学通HTML+CSS+JavaScript Web开发

21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

查看详情
JS可视化文件上传 学习笔记
网友NO.760463

BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 span link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" / script type="text/javascript" src="fileinput/js/fileinput.js"/script script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"/script/span 2.html设置: span form enctype="multipart/form-data" input id="file-file" class="file" type="file" multiple /form/span 3.初始化设置: function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ resizeImage : true, maxImageWidth : 200, maxImageHeight : 200, resizePreference : 'width', language : 'zh', //设置语言 uploadUrl : uploadUrl, uploadAsync : true, allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀 showUpload : true, //是否显示上传按钮 showCaption : true,//是否显示标题 browseClass : "btn btn-primary", //按钮样式 previewFileIcon : "i class='glyphicon glyphicon-king'/i", maxFileCount : 3, ms……

网友NO.749904

利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要么很麻烦,比如改配置,要么不稳定,比如文件上G以后,上传要么死掉,要么卡住,通过设置web.config并不能很好的解决这些问题。 这是一个Html5统治浏览器的时代,在这个新的时代,这种问题已被简化并解决,我们可以利用Html5分片上传的技术,那么Plupload则是一个对此技术进行封装的前端脚本库,这个库的好处是可以自动检测浏览器是否支持html5技术,不支持再检测是否支持flash技术,甚至是sliverlight技术,如果支持,就使用检测到的技术。 那么这个库到哪里下载,怎么搭建呢,比较懒的童鞋还是用Install-Package Plupload搞定吧,一个命令搞定所有事 下面给出一个例子,……

网友NO.224640

Node.js实现文件上传的示例

文件上传指的是将用户本地的文件上传到服务器中。 上传文件需要处理两个位置: 客户端 客户端如何上传文件? 上传文件的表单项需要指定为input,type是file 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype=”application/x-www-form-urlencoded”是默认值。这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码。 1、multipart/form-data body-parser 无法解析, multer 模块专门用来帮助我们解析多部件的请求体。 bodyh2文件上传(file upload)/h2form action="/testUpload" method="post" enctype="multipart/form-data" id="form" pre Hi sir input type="text" name="username"/ upupup input type="file" name="photo"/ input type="submit" value="提交" id ="btn" /pre/form// 利用AJAX 上传文件script var btn = document.getElementById("btn"); btn.onclick = functi……

网友NO.668335

nodejs+express实现文件上传下载管理网站

nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端: 基于nodejs的express的web框架. 前端: bootstrap框架+vuejs、jquery等js库 功能点: dronzone.js实现文件拖拽上传、下载,可自定义传输容量。 vuejs实现表格双向数据绑定。 jquery.form.min.js表单插件,升级表单,实现表单提交回调。 纯css+jQuery实现一键返回顶部。 简单的ajax异步刷新。 项目结构总览: app/:典型的MVC架构,其下包含模型(models),视图(views),控制器(controller),不过此处没有用到models层,完全是试图与控制器进行数据的交互。前端页面用jade前端模板引擎编写,因为jade可以很好的支持页面的模块化,套用bootstrap前端框架。 config/:应用的配置目录,包括静态目录的配置,数据库的配置等,不多说。 freedom/:其下有两个字子目录(hidden/和upload/),其中hidden/目录存放……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757