表单添加缩略图及截图js代码

Posted 2020-10-20 咖啡爱上茶

此为表单提交是上传截图的代码，待优化；

// 添加小程序图片
function addAvatar(obj){
  var file = obj.files[0];
  limit($(\'.avatar_box\'),$(".avatar-error"),788,file); 
}

function addqr(obj){
  var file = obj.files[0];
  limit($(\'.ewmfile_box\'),$(".qrimg-error"),788,file);
}
// 限制上传图片大小$(\'.ewmfile_box\')
function limit(ele,errorele,limit,file){
    var fileSize = file.size;
    var size = fileSize / 1024;
    var str;
    if(limit / 1024 >= 1) {
      if(limit / (1024 * 1024) >= 1) {
        str = limit / (1024 * 1024) + \'GB!\';
      } else {
        str = limit / 1024 + \'MB!\';
      }
    } else {
      str = limit + \'KB!\';
    }
    var tips = \'上传图片不能大于\'+ str;
    if(size > parseInt(limit)){
      errorele.text(tips);
      return false;
    }
    else{
      errorele.text(\'\');
      // 编译图片base64
      readAsDataURL()
      function readAsDataURL(){  
        //检验是否为图像文件  
        // if(!/image\\/\\w+/.test(file.type)){  
        //     alert("看清楚，这个需要图片！");  
        //     return false;  
        // }
        var reader = new FileReader();  
        //将文件以Data URL形式读入页面  
        reader.readAsDataURL(file);  
        reader.onload = function(e){  
            //显示文件  
            ele.css(\'display\',\'block\').html(\'<img src="\' + this.result +\'" alt="" />\').siblings().css(\'display\',\'none\')
        }  
      }  
    }
}

function addscreen(obj,limit){
  //限制图片大小
  var file = obj.files[0];
  var fileSize = file.size;
  var size = fileSize / 1024;
  var str;
  if(limit / 1024 >= 1) {
    if(limit / (1024 * 1024) >= 1) {
      str = limit / (1024 * 1024) + \'GB!\';
    } else {
      str = limit / 1024 + \'MB!\';
    }
  } else {
    str = limit + \'KB!\';
  }
  var tips = \'上传图片不能大于\'+ str;
  if(size > parseInt(limit)){
    $(".check-screenshot-error").text(tips);
    return false;
  }
  else{
    $(".check-screenshot-error").text(\'\');  
  }
  //截图表单提交
  $("#form1").ajaxSubmit({
      // url :\'/e/DoInfo/imageUp.php\',
      dataType:\'json\',
      success: function(data){
        $("input[type=file]").val(\'\');
        if(data.status ==1){
          var sreenshot =\'<div class="screenshot_box"><img src="\'+data.url+\'" alt=""><input type="hidden" name="screenshot[]" value="\'+data.url+\'"><p class="del">删除</p></div>\'
          $(\'.add-screenshot\').prepend(sreenshot);
          if($(\'.add-screenshot .screenshot_box\').length >= 6){
            $(\'.screen_add\').css(\'display\',\'none\')
          }else{
            $(\'.screen_add\').css(\'display\',\'block\')
          }
        }else{
          $(".check-screenshot-error").text(\'上传截图失败！\');
          return false;
        }
      },
      error:function(){
        $(".check-screenshot-error").text(\'上传失败，请检查网络！\');
      }
    });
}
// 删除上传的截图
$(".add-screenshot").delegate(\'.screenshot_box\',"mouseenter mouseleave",function(event){
  var _this = $(this)
  if( event.type == "mouseenter"){
    $(this).find(\'.del\').css(\'display\',\'block\').click( function(){
      _this.remove();
      $(\'.screen_add.screenshot_box\').css(\'display\',\'block\');
    });
  }else if(event.type == "mouseleave" ){
    $(this).find(\'.del\').css(\'display\',\'none\');
  }  

});
//表单提交
function onSubmit () {
  //表单验证
  if($("input[name=title]").val() == \'\'){
    $(".title-error").text(\'请填写小程序名字！\');
    return false;
  }else{
    $(".title-error").text(\'\');
  }
  
  if($(".avatar_box img").length == 0){
    $(".avatar-error").text(\'请添加小程序图片！\');
    return false;
  }
  else{
    $(".avatar-error").text(\'\');
  }
  
  if($(".ewmfile_box img").length == 0){
    $(".qrimg-error").text(\'请添加小程序二维码！\');
    return false;
  }
  else{
    $(".qrimg-error").text(\'\');
  }
  
  if($("#newstext").val() == \'\'){
    $(".intro-error").text(\'请填写小程序介绍！\');
    return false;
  }else{
    $(".intro-error").text(\'\');
  }

  // if($(".add-screenshot .screenshot_box").length <= 3){
  //   $(".check-screenshot-error").text(\'请添加至少3张小程序应用截图！\');
  //   return false;
  // }
  // else{
  //   $(".check-screenshot-error").text(\'\');
  // }
  
  if($("input[name=key]").val() == \'\'){
    $(".key-error").text(\'请填写验证码\');
    return false;
  }
  else{
    $(".check-screenshot-error").text(\'\');
  }
}

在上传过程中有两种上传方式，使用form表单submit提交以及使用ajax异步请求提交；

1、form表单提交：

form表单提交时，由于一般不会使用原生的表单样式，会设计新的样式，所以在上传图片事需要做的就是ajax异步请求返回图片在服务器的地址或者不使用异步请求直接将上传的图片编译处成base64然后插入；

<input type="file" name="file" class="hide" form="form1" onChange="upload(this,100,\'form1\',uploadPics,\'name\',5)" accept="image/jpg,image/jpeg,image/png" multiple="multiple"/>锚点到form1进行表单提交；

<form id="form1" action="/upload/create" method="post" enctype="multipart/form-data"></form>

2、ajax异步请求：

如果不使用form表单方式提交可以选择使用jquery-form.js参考http://malsup.com/jquery/form/插件进行异步提交

 

整个表单的提交方式可以参考https://www.cnblogs.com/zhuxiaojie/p/4783939.html

截图上传思想：先将截图样式写好后将截图html文本删除，待请求到图片地址后在回调中动态添加一个个截图html；

注：前端本地文件操作与上传，如通过input type=”file” 选择本地文件、通过拖拽的方式把文件拖过来、在编辑框里面复制粘贴此三种方式可以参考人人网的文章https://fed.renren.com/2017/11/25/local-file-manage-upload/