表單添加縮略圖及截圖js代碼

此為表單送出是上傳截圖的代碼，待優化；

// 添加小程式圖檔
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進行表單送出；

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/