javascript图片上传相关资料整理

liukai90 发布于2019-08-22 10:49 / 1887人阅读

摘要：说明使用获取表单的数据，不同通过和获取值上传图片这三个参数必须配置该处使用了来获取文件上传的进度本人没实验，待测图片压缩

图片上传的多种方式 一.使用Form表单，enctype="multipart/form-data"

说明：
1.监听input上的change事件可以实现自动上传到服务器
2.服务器端通过name字段，获取上传图片的信息
3.数据信息为let imginfo = new FormData($("#uploadForm")[0]),imginfo是一个对象,通过post("/upload", imginfo);调用

如何不使用From表单上传图片

var formData = new FormData();
var imginfo = formData.append("file", $("#file")[0].files[0]);
// imginfo通过组装的方式得到，通过上面接口实现上传。
//其中`name=file`和`append("file")`中的file都是服务器端获取图片信息的标示。

二.使用Base64的方式，使用这种方式，可以直接实现本地预览

if (window.FileReader) {
  var oFileReader = new FileReader(),
  oFile = e.target.files[0];
  if (/^image*/.test(oFile.type)) {
    oFileReader.onloadend = function (e) {
      let binfo64 = e.target.result;
      let postinfo = {
        image: binfo64,
        filename: `passport-${new Date().getTime()}`
      }
    };
    oFileReader.readAsDataURL(oFile);
  } else {
    Toast.makeText("传入图片文件");
  }
}

三.使用Ajax上传图片信息，并显示图片上传的进度

来自https://www.w3ctrain.com/2015/07/11/uploading-image-with-ajax/

//绑定了`submit`事件。    
   $("#fileupload-form").on("submit",(function(e) {
       e.preventDefault();
       //序列化表单   
      var serializeData = $(this).serialize();
      
      // var formData = new FormData(this);
      $(this).ajaxSubmit({
           type:"POST",
           url: *yoururl*,
           dataType: "json", 
           data: serializeData,            
           // data: formData,
           
           //attention!!!   
           contentType: false,      
           cache: false,             
           processData:false,      
             
           beforeSubmit: function() {
                   //上传图片之前的处理   
           },
           uploadProgress: function (event, position, total, percentComplete){ 
               //在这里控制进度条   
           },
           success:function(){
               
           },
           error:function(data){
               alert("上传图片出错");
           }
       });
   }));

//绑定文件选择事件，一选择了图片，就让`form`提交。   

   $("#fileupload").on("change", function() {
       $(this).parent().submit();
});

说明：
1.使用.serialize()获取表单的数据，不同通过val和text获取值
2.ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false
3.该处使用了uploadProgress 来获取文件上传的进度（本人没实验，待测）

图片压缩

https://github.com/mhbseal/html5ImgCompress

云服务器 GPU云服务器上传资料图片大小限制整理资料补码资料整理相关资料

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91313.html

JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

ivyzhang 2019-08-20 16:29 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

CloudwiseAPM 2019-08-01 16:48 评论0 收藏0