JS轻巧贯彻文件上传实例代码,JavaScript实现写入文件到本地的方法

正文实例汇报了JavaScript使用享元方式完结文件上传优化操作。分享给咱们供大家参考,具体如下:

前段时间做项目遭遇叁个要求是上传文件,大致供给达成的体制是那样子的,见下图:

本文实例陈说了JavaScript达成写入文件到本地的主意。分享给大家供我们参照他事他说加以考察,具体如下:

复制代码 代码如下:

一、享元方式是一种用于品质优化的方式,首要优化措施为,若系统中因为创立了多量像样的指标而招致内存占用过高,则能够虚构动用享元情势实现。

亚洲必赢官网 1

做事中有时需求经过 JavaScript 保存文件到地点,大家都明白 JavaScript
基于安全的虚拟,是不允许直接操作当麻芋果件的。

<span class=”up-btn” id=”selectFile”>请选用文件</span>
<input type=”file” name=”fileupload” style=”FILTER: alpha(opacity=0);
moz-opacity: 0; opacity: 0;” />

二、实例证实:

急需同一时候上传多少个公文。而且分明文件格式和文件大小。因为前端框架使用angular,且不想因为贰个上传功用又引进叁个jquery,所以在英特网找寻基于angular的上传控件,因为angular还算相比较新,貌似都不曾太早熟的插件,互联网的教程也基本上是复制粘贴,同理可得没起倒多大的效果与利益…不过皇天不辜负有心人,最终依旧让自家超过了这么些功效强大的插件,让本人有种相见恨晚的认为啊,依靠官方文书档案和师兄的佑助,终于搞驾驭了核心的应用方法。好东西要享受,所今后后跟我们共享一下她的选拔情势,借使大家刚刚必要使用,希望能帮到大家。

IE 能够通过 VB 插件的办法张开,而 Chrome 和 firefox 都不协理 JavaScript
向本地写入文件,所以 VB 插件的主意存在包容性难点。

// 点击#JS轻巧贯彻文件上传实例代码,JavaScript实现写入文件到本地的方法。selectFile触发input:file的click事件

尽管在浏览器中上传文书,若选取正规写法,
每上传四个文书,就能够创设一个实例对象;假使上传两千个公文,那就有三千个对象,浏览器很只怕出现假死状态。这种景色下,我们着想适应享元格局。

上传开关的体制 先是小编想先说一下上传文件的开关样式,为何呢?我们都晓得上传会用到这么些标签。<input
type=”file”/>,那行代码的私下认可样式真的有个别欠美观,见下图:

那有未有合乎的措施吧?答案是鲜明的,我们能够经过 FileSaver.js
那个小插件达成大家的须求。上面看一段具体的代码吧:

复制代码 代码如下:

三、实例:

亚洲必赢官网 2

/**
 * 下载文件
 */
var downloadTextFile = function(mobileCode) {
  if(isEmpty(mobileCode)) {
    mobileCode = '';
  }
  var file = new File([mobileCode], "手机号.txt", { type: "text/plain;charset=utf-8" });
  saveAs(file);
}

jQuery(‘#selectFile’).live(‘click’,function(){
  var ie = !-[1,];
  if(ie){
   jQuery(‘input:file’).trigger(‘click’).trigger(‘change’);
  }else{
   jQuery(‘input:file’).trigger(‘click’);
  }

var Upload = function( uploadType ){
  this.uploadType = uploadType;
};
Upload.prototype.delFile = function( id ){
  uploadManager.setExternalState( id, this );
  if( this.fileSize < 300 ){
   return this.dom.parentNode.removeChild( this.dom );
  }
  if( window.confirm('确定要删除该文件吗?' + this.fileName )){
     return this.dom.parentNode.removeChild( this.dom);
  }
};
var UploadFactory = (function(){
  var createdFlyWeightObjs = {};
  return {
    create: function( uploadType ){
      if(createFlyWeightObjs[uploadType]){
        return createdFlyWeightObjs[uploadType];
      }
      return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
    }
  }
})();
var uploadManager = (function(){
  var uploadDatabase = {};
  return{
    add: function(id, uploadType, fileName, fileSize){
      var flyWeightObj = UploadFactory.create( uploadType );
      var dom = document.createElement( 'div' );
      dom.innerHTML = '文件名称:'+fileName+',文件大小:' +fileSize + '' + '<button class="delFile">删除</button>';
      dom.querySelector( ".delFile" ).onclick = function(){
       flyWeightObj.delFile( id );
       document.body.appendChild( dom );
       uploadDatabase[ id ] = {
         fileName: fileName,
         fileSize: fileSize,
         dom: dom
       };
       return flyWeightObj;
     },
     setExternalState: functon( id, flyWeightObj ){
        var uploadData = uploadDatabase[ id ];
        for( var i in uploadData){
           flyWeightObj[ i ] = uploadData[ i ];
        }
     }
  }
})();

在三个某个有一点逼格的网站中,那样一个体裁实在是有一点点损失形象了,何况一旦急需在日前加二个输入框来展现文件名的话,这暗许的呈现文件名的区域怎么掩饰掉呢?别急,继续看:

其一示例是向本地存款和储蓄三个名字叫“手提式无线电话机号.txt”的文本文件,选择的字符编码格式为“UTF-8”,那样就幸免的汉语乱码的难点。聪明的您也赶忙试试啊!

 });

下一场需求写三个接触上传动作的startUpload函数:

用二个a标签包住input标签,然后把input标签的opacity设为0,就足以了嘛!ok,看代码:

附 FileSaver.js
文件的共同体源码:

入选文件要接触的风云

var id = o;
window.startUpload = function( uploadType, files ){
  for( var i=0,file; file = fules[ i ++ ];){
     var uploadObj = uploadManger.add( ++id, uploadType, file.fileName, file.fileSize );
  }
};

html:

/* FileSaver.js
 * A saveAs() FileSaver implementation.
 * 1.3.2
 * 2016-06-16 18:25:19
 *
 * By Eli Grey, http://eligrey.com
 * License: MIT
 *  See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
 */
/*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs || (function(view) {
  "use strict";
  // IE <10 is explicitly unsupported
  if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
    return;
  }
  var
     doc = view.document
     // only get URL when necessary in case Blob.js hasn't overridden it yet
    , get_URL = function() {
      return view.URL || view.webkitURL || view;
    }
    , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
    , can_use_save_link = "download" in save_link
    , click = function(node) {
      var event = new MouseEvent("click");
      node.dispatchEvent(event);
    }
    , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
    , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
    , throw_outside = function(ex) {
      (view.setImmediate || view.setTimeout)(function() {
        throw ex;
      }, 0);
    }
    , force_saveable_type = "application/octet-stream"
    // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
    , arbitrary_revoke_timeout = 1000 * 40 // in ms
    , revoke = function(file) {
      var revoker = function() {
        if (typeof file === "string") { // file is an object URL
          get_URL().revokeObjectURL(file);
        } else { // file is a File
          file.remove();
        }
      };
      setTimeout(revoker, arbitrary_revoke_timeout);
    }
    , dispatch = function(filesaver, event_types, event) {
      event_types = [].concat(event_types);
      var i = event_types.length;
      while (i--) {
        var listener = filesaver["on" + event_types[i]];
        if (typeof listener === "function") {
          try {
            listener.call(filesaver, event || filesaver);
          } catch (ex) {
            throw_outside(ex);
          }
        }
      }
    }
    , auto_bom = function(blob) {
      // prepend BOM for UTF-8 XML and text/* types (including HTML)
      // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
      if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
        return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
      }
      return blob;
    }
    , FileSaver = function(blob, name, no_auto_bom) {
      if (!no_auto_bom) {
        blob = auto_bom(blob);
      }
      // First try a.download, then web filesystem, then object URLs
      var
         filesaver = this
        , type = blob.type
        , force = type === force_saveable_type
        , object_url
        , dispatch_all = function() {
          dispatch(filesaver, "writestart progress write writeend".split(" "));
        }
        // on any filesys errors revert to saving with object URLs
        , fs_error = function() {
          if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
            // Safari doesn't allow downloading of blob urls
            var reader = new FileReader();
            reader.onloadend = function() {
              var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
              var popup = view.open(url, '_blank');
              if(!popup) view.location.href = url;
              url=undefined; // release reference before dispatching
              filesaver.readyState = filesaver.DONE;
              dispatch_all();
            };
            reader.readAsDataURL(blob);
            filesaver.readyState = filesaver.INIT;
            return;
          }
          // don't create more object URLs than needed
          if (!object_url) {
            object_url = get_URL().createObjectURL(blob);
          }
          if (force) {
            view.location.href = object_url;
          } else {
            var opened = view.open(object_url, "_blank");
            if (!opened) {
              // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
              view.location.href = object_url;
            }
          }
          filesaver.readyState = filesaver.DONE;
          dispatch_all();
          revoke(object_url);
        }
      ;
      filesaver.readyState = filesaver.INIT;
      if (can_use_save_link) {
        object_url = get_URL().createObjectURL(blob);
        setTimeout(function() {
          save_link.href = object_url;
          save_link.download = name;
          click(save_link);
          dispatch_all();
          revoke(object_url);
          filesaver.readyState = filesaver.DONE;
        });
        return;
      }
      fs_error();
    }
    , FS_proto = FileSaver.prototype
    , saveAs = function(blob, name, no_auto_bom) {
      return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
    }
  ;
  // IE 10+ (native saveAs)
  if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
    return function(blob, name, no_auto_bom) {
      name = name || blob.name || "download";
      if (!no_auto_bom) {
        blob = auto_bom(blob);
      }
      return navigator.msSaveOrOpenBlob(blob, name);
    };
  }
  FS_proto.abort = function(){};
  FS_proto.readyState = FS_proto.INIT = 0;
  FS_proto.WRITING = 1;
  FS_proto.DONE = 2;
  FS_proto.error =
  FS_proto.onwritestart =
  FS_proto.onprogress =
  FS_proto.onwrite =
  FS_proto.onabort =
  FS_proto.onerror =
  FS_proto.onwriteend =
    null;
  return saveAs;
}(
    typeof self !== "undefined" && self
  || typeof window !== "undefined" && window
  || this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window
if (typeof module !== "undefined" && module.exports) {
 module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
 define("FileSaver.js", function() {
  return saveAs;
 });
}

复制代码 代码如下:

终极调用,如下:

 <div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>
 <div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>

PS:本站在线工具上边工具中的很多文书下载功效都以依赖FileSaver.js插件实现的,感兴趣的意中人能够搜索参谋一下。

 jQuery(‘input:file’).change(function(){
  //dosomthing
 }); 

startUpload( 'plugin', [
  {
    fileName: '1.txt',
    fileSize: 1000
   },
   {
     fileName: '2.html',
     fileSize: 1000
   },
   {
     fileName: '3.txt',
     fileSize: 5000
   }
]);
startUpload( 'flash', [
  {
    fileName: '4.txt',
    fileSize: 1000
   },
   {
     fileName: '5.html',
     fileSize: 1000
   },
   {
     fileName: '6.txt',
     fileSize: 5000
   }
]);

然后是css文件:

更加多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript文件与目录操作手艺汇总》、《JavaScript查找算法技艺计算》、《JavaScript数据结构与算法技术总结》、《JavaScript遍历算法与本领总计》、《JavaScript错误与调治本事计算》及《JavaScript数学生运动算用法总计》

注意事项:

四、解释:

.filename{
 width: 300px;
 height: 30px;
 line-height: 30px;
}
a{
 width: 50px;
 text-align: center;
 height: 30px;
 line-height: 30px;
 position: raletive;
 cursor: pointer;
 overflow:hidden;
 display: inline-block;
}
a input{
 position: absolute:
 left: 0;
 top: 0;
 opacity: 0;
}

梦想本文所述对我们JavaScript程序设计有所帮忙。

1、在chrome浏览器下,为了多少安全,遮盖的input:file无法trigger “click”
事件。  所以要设置input:file的光滑度达到掩饰的功能。

调用时,有多个指标,但独有四个档期的顺序(plugin和flash),大家通过享元方式,在成立对象时,唯有四个,如若上边提到的上传两千个公文,利用方面包车型客车代码,同样只开创五个对象,那么那就很好的消除了浏览器崩溃假死的难题。

马到功成了!!!你看来的体裁就改为了那般了,见下图:

您恐怕感兴趣的篇章:

  • Node.js readline
    逐行读取、写入文件内容的亲自去做
  • Javascript写入txt和读取txt文件示例
  • jscript读写二进制文件的情势
  • JavaScript使用FileSystemObject对象写入文本文件内容的办法
  • javascript写的异步加载js文件函数(协助数组传参)
  • JS基于FileSaver.js插件完结文件保留作用示例
  • js基于FileSaver.js
    浏览器导出Excel文件的亲自去做
  • 用JS在浏览器中创制下载文件
  • javascript
    保存文件到本地达成情势
  • JavaScript中读取和保存文件实例

2、在ie6,7下input
file文件不帮忙onchange事件,所以在此浏览器下自家要么用<input
type=”file” value=”” />

更加多关于JavaScript相关内容可查看本站专项论题:《javascript面向对象入门教程》、《JavaScript切换特效与本事计算》、《JavaScript查找算法技术总计》、《JavaScript错误与调度技能总计》、《JavaScript数据结构与算法技艺总计》、《JavaScript遍历算法与本事计算》及《JavaScript数学生运动算用法计算》

亚洲必赢官网 3

您也许感兴趣的稿子:

  • JS完毕可视化文件上传
  • js达成文件上传成效后台使用MultipartFile
  • JS+Struts2多文本上传实例详解
  • JavaScript使用享元格局达成公文上传优化操作示例
  • 亚洲必赢官网,js 达成 input type=”file”
    文件上传示例代码
  • 原生JS和jQuery版实现文件上传效用
  • JS文件上传神器bootstrap
    fileinput详解
  • 学习运用AngularJS文件上传控件
  • ajaxFileUpload.js插件扶助多文本上传的方法
  • 原生JS达成前端当三步跳件上传

但愿本文所述对大家JavaScript程序设计有所协理。

你能够调节前边的输入框来展现你采取了的文件名,是或不是赏心悦目多了吗?

你大概感兴趣的小说:

  • JS落成可视化文件上传
  • js达成公文上传效能后台使用MultipartFile
  • JS+Struts2多文书上传实例详解
  • js 落成 input type=”file”
    文件上传示例代码
  • 原生JS和jQuery版实现公文上传功用
  • JS文件上传神器bootstrap
    fileinput详解
  • 上学应用AngularJS文件上传控件
  • JS简单兑现公文上传实例代码(无需插件)
  • ajaxFileUpload.js插件帮忙多文件上传的主意
  • 原生JS完成前端当和姑件上传

亚洲必赢官网 4

angular-file-upload

事例中能够找到大家供给的公文。例子中的es5-shim.min.js文件是为老的浏览器包容而引入的,所以那么些插件真的很庞大呀。

下一场大家来一步步行使那几个插件来兑现公文上传的意义吗。

这么些插件定义了多少个指令:nv-file-drop、nv-file-select、uploader

从单词意思来看应该轻巧猜出,第三个协理文件脱拽采取,第四个是点击选用,uploader用于绑定在调整器中新建的upload对象。

html文件

<form class="form-horizontal" name="form">
 <div class="form-line">
 <label>请选择证书文件:</label>证书文件只支持.pem格式,文件大小1M以内
 <div class="choose-file-area">
  <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
  <a href="javascript:;" class="choose-book">
  <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览
  </a>
 </div>
 </div>
 <div class="form-line">
 <label>请选择私钥文件:</label>私钥文件只支持.key格式,文件大小1M以内
 <div class="choose-file-area">
  <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
  <a href="javascript:;" class="choose-key">
  <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>浏览
  </a>
 </div>
 </div>
 <button type="submit" ng-click="UploadFile()">提交</button>
</form>

第一,注意这里须求上传两个公文,所以笔者创设多个upload对象,方便处理文件和拍卖回调函数。最终给上传开关二个点击事件,同一时候管理八个目的的上传事件。

调控器文件

var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
 $scope.uploadStatus = $scope.uploadStatus1 = false; //定义两个上传后返回的状态,成功获失败
 var uploader = $scope.uploader = new FileUploader({
 url: 'upload.php',
 queueLimit: 1, //文件个数 
 removeAfterUpload: true //上传后删除文件
 });
 var uploader1 = $scope.uploader1 = new FileUploader({
 url: 'upload.php',
 queueLimit: 1,
 removeAfterUpload: true 
 });
 $scope.clearItems = function(){ //重新选择文件时,清空队列,达到覆盖文件的效果
 uploader.clearQueue();
 }
 $scope.clearItems1 = function(){
 uploader1.clearQueue();
 }
 uploader.onAfterAddingFile = function(fileItem) {
 $scope.fileItem = fileItem._file; //添加文件之后,把文件信息赋给scope
 };
 uploader1.onAfterAddingFile = function(fileItem) {
 $scope.fileItem1 = fileItem._file; //添加文件之后,把文件信息赋给scope
 //能够在这里判断添加的文件名后缀和文件大小是否满足需求。
 };
 uploader.onSuccessItem = function(fileItem, response, status, headers) {
 $scope.uploadStatus = true; //上传成功则把状态改为true
 };
 uploader1.onSuccessItem = function(fileItem,response, status, headers){
 $scope.uploadStatus1 = true;
 }
 $scope.UploadFile = function(){
 uploader.uploadAll();
 uploader1.uploadAll();
 if(status){
  if(status1){
  alert('上传成功!');
  }else{
  alert('证书成功!私钥失败!');
  }
 }else{
  if(status1){
  alert('私钥成功!证书失败!');
  }else{
  alert('上传失败!');
  }
 }
 }
}])

总结 在上头的例证中,作者定义了五个upload对象是因为要上传五个文件,每二回重复选拔文件时应当覆盖从前选好的文书,所以假若定义三个对象时,有一些不佳操作覆盖的岗位,而定义三个目的,在重复采纳的时候,完全可以先清空当前指标的文件队列,再加多就好了。

实际后来自己发觉,也得以不定义多少个upload对象,因为那一个插件提供了三个removeFromQueue(index)方法,index是文件队列数组普通话件的index值。因为是一遍选拔文件,所以把长度调控在2,然后每趟选拔的时候调用这些方法,依据职责传入0大概1就好了。

固然急需贯彻同三个窗口能够多选文件,使用加上<input type=”file”
multiple=”true” />就能够。

假若必要限制文件类型,能够采纳<input type=”file” accept=”image/*”
/>’即可。

accept取值类型列表:

* accept="application/msexcel"

* accept="application/msword"

* accept="application/pdf"

* accept="application/poscript"

* accept="application/rtf"

* accept="application/x-zip-compressed"

* accept="audio/basic"

* accept="audio/x-aiff"

* accept="audio/x-mpeg"

* accept="audio/x-pn/realaudio"

* accept="audio/x-waw"

* accept="image/*"

* accept="image/gif"

* accept="image/jpeg"

* accept="image/tiff"

* accept="image/x-ms-bmp"

* accept="image/x-photo-cd"

* accept="image/x-png"

* accept="image/x-portablebitmap"

* accept="image/x-portable-greymap"

* accept="image/x-portable-pixmap"

* accept="image/x-rgb"

* accept="text/html"

* accept="text/plain"

* accept="video/quicktime"

* accept="video/x-mpeg2"

* accept="video/x-msvideo"

那一个插件还提供了过多的布局参数,对象方法和回调函数。

更加多精彩内容请参见专项论题《ajax上传技艺汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》拓展学习。

上述便是有关AngularJS文件上传控件的应用方法介绍,希望对大家的就学抱有协助。

您大概感兴趣的篇章:

  • JS完毕可视化文件上传
  • js达成文件上传效能后台使用MultipartFile
  • JS+Struts2多文书上传实例详解
  • JavaScript使用享元形式完毕公文上传优化操作示例
  • js 完结 input type=”file”
    文件上传示例代码
  • 原生JS和jQuery版完毕文件上传作用
  • JS文件上传神器bootstrap
    fileinput详解
  • JS简单兑现公文上传实例代码(不须要插件)
  • ajaxFileUpload.js插件补助多文件上传的情势
  • 原生JS完毕前端当麻芋果件上传
网站地图xml地图