浏览器识别本地上传图片(转)

html:

<span class="shop_pic shop_pro" onClick="opload_file(this);" type="addButton">
添加图片<strong></strong>
</span>
<input class="change_img" type="file" name="image[]" style="display:none">

 

js:

function opload_file(obj){
  $(obj).next('input[type="file"]').click();
  $("#image_error").html('');
}

function getObjectURL(file) {
  var url = null ;
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
}

 

$('#pic_list input[type="file"]').live('change',function(){
  var objUrl = getObjectURL(this.files[0]);
  var type = this.files[0]['type'].split("/");
  if(type[1] != "jpeg" && type[1] != "png" && type[1] != "gif"){
    $("#image_error").html("图片格式不正确");
  }else{
    var size = this.files[0]['size'];
    /* if(size > 10485760){
      //限制10M的图片
      $("#image_error").html("图片必须小于10M");
    }*/
    if (objUrl) {
      $("#image_dom").children("span[type='addButton']").html('');
      var image = '<img src="'+objUrl+'" width="191" height="126" />';
      $("#image_dom").children("span[type='addButton']").append(image);
      var strong_html = "<strong class='bg2' onclick='delImage(this);'></strong>";
      $("#image_dom").children("span[type='addButton']").append(strong_html);
      $("#image_dom").children("span[type='addButton']").attr('type','addPic');

      var num = $("#image_dom").children("span:[type='addPic']").length;
      if(num < 4){
        if(size > 10485760){
          //限制10M的图片
          $("#image_error").html("图片必须小于10M");
        }else{
          var addButton = '<span class="shop_pic shop_pro" onclick="opload_file(this);" type="addButton">';
          addButton += '添加产品<strong></strong>';
          addButton += '</span>';
          addButton += '<input class="change_img" type="file" name="image[]" style="display:none">';

          $(this).parent("#image_dom").append(addButton);
        }
      }
    }
  }
});

 

<input type="file" name="pictures[]" multiple="multiple" />

残念的是IE不支持…

posted @ 2014-10-16 15:14  幻星宇  阅读(1004)  评论(0编辑  收藏  举报