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


    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不支持…

  • 相关阅读:
    嵌入式软件设计第11次实验报告-140201235-陈宇
    嵌入式软件设计第十次实验报告-140201235-陈宇
    嵌入式软件设计第九次实验报告-140201235-陈宇
    软件工程学-需求分析
    嵌入式软件设计第8次实验报告-140201235-陈宇
    嵌入式软件设计第7次实验报告-140201235-陈宇
    软件工程作业三:微软小娜APP的案例分析
    结构化分析(SA)加工逻辑工具
    软件工程作业二:需求分析
    软件工程作业一
  • 原文地址:https://www.cnblogs.com/xingmeng/p/4028873.html
Copyright © 2020-2023  润新知