zoukankan      html  css  js  c++  java
  • 文件上传预览

    //图片上传预览
    $('#fileUpload').change(function(){
         var file = this.files; //选择上传的文件
         var r = '';
         for(var i = 0;i<file.length;i++){
             r = new FileReader();
             r.readAsDataURL(file[i]); //Base64
             $(r).load(function(){
                 $('.imgTx').css({
                     'background':'url('+this.result+')',
                     'background-size':'cover'});
             });
          }
    });
    
    //头像上传
    $('body').on('change','#fileUpload',img_up);
    
    function img_up(){
           var that=this;//保存当前this
           var file = that.files[0];
           var fd = new FormData();
           fd.append("file", file);
           fd.append("fileDesc", "test");
           layer.load(0);
           $.ajax({
                 async: true,
                 url: ApiConf+'Resource/ResourceAdd',
                 type: "POST",
                 dataType: 'json',
                 data: fd,
                 contentType: false,
                 beforeSend: function (xhr) {
                       xhr.setRequestHeader("authorization", token);
                 },
                 xhr: function() {
                       myXhr = $.ajaxSettings.xhr();
                       return myXhr;
                 },
                 success:function(arr) {
                 //头像id
                 that.setAttribute('name',arr.data[0].resourceid);
                 $('.imgTx').css({
                       'background':'url('+arr.data[0].resourcepath+') no-repeat',
                       'background-position':'center',
                       'background-size':'contain'
                 });
                 layer.msg('头像上传成功',{icon: 1});
                 layer.closeAll('loading');
                 },
                 error:function() {
                       layer.msg("上传失败");
                 },
                 cache:false,
                 processData:false
            });
        }
  • 相关阅读:
    webpack学习_管理输出(管理资源插件)
    vue路由
    vue动态组件,组件缓存
    vue组件间传参
    模块化
    安装Vue脚手架,创建Vue项目
    Vue常用指令
    VUE概述
    小程序调用微信支付接口
    Android音视频开发之-WebRTC技术实践
  • 原文地址:https://www.cnblogs.com/wanf/p/7691404.html
Copyright © 2011-2022 走看看