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

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

时间: 2024-10-17 14:55:16

浏览器识别本地上传图片(转)的相关文章

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid App为什么会兴起编辑 1 1.2. 如何实现网页语言与程序语言的混合编辑 2 1.2.1. 多View混合型 2 1.2.2. 单View混合型 2 1.2.3. Web主体型 2 1.3. Hybrid App的瓶颈与未来编辑 3 2. Web App.Hybrid App.Native APP对比

兼容多浏览器的本地存储

在做考试系统时需要解决这样一个问题,就是当考生考试时可能出出现断网.关闭浏览器,刷新等问题,数据此时可能没有及时写入数据库,所以造成数据丢失问题,,所以这里就需要用到本地存储,以前的版本都是用cookie,但是不得不说cookie太小了,只有可怜的4k,而机房的网有时候实在是让人捉急,所以,考虑换一种方案. 直接读取XML实现方式 因为本地存储平时接触的不是太多,开始想的只是简单的读取本地的XML,做起来倒是挺容易的,一个语句就能搞定: <script language="javascri

加傲腾内存的电脑PE无法识别本地磁盘解决办法(M.2接口??)

---恢复内容开始--- PE一直无法识别本地硬盘一直以为是主板设置的事情!原来是新兴的接口(M.2固态具体我不大明白)的事情,需要磁盘驱动,因为PE是精简的大多数不带驱动,但是2018年的新更新的PE基本都支持了 (包括老毛桃.....各种带广告锁主页的)用最新的PE制作工具就可以........一定要用最新的最新的最新的 建议 用USBOS v3.0 增强版2018.12.02    ---恢复内容结束--- 原文地址:https://www.cnblogs.com/xuexidememed

灵魂拷问第2篇:能不能说一说浏览器的本地存储?各自优劣如何?

浏览器的本地存储主要分为Cookie.WebStorage和IndexedDB, 其中WebStorage又可以分为localStorage和sessionStorage.接下来我们就来一一分析这些本地存储方案. Cookie Cookie 最开始被设计出来其实并不是来做本地存储的,而是为了弥补HTTP在状态管理上的不足. HTTP 协议是一个无状态协议,客户端向服务器发请求,服务器返回响应,故事就这样结束了,但是下次发请求如何让服务端知道客户端是谁呢? 这种背景下,就产生了 Cookie. C

用PHP调用证件识别接口识别本地图片

前置条件 在开始前,请作如下准备:1.学会用PHP输出"Hello World" 2.去聚合数据申请证件识别专用的KEY:https://www.juhe.cn/docs/api/id/153 操作步骤 1.配置好PHP开发环境 2.在相应的本地网站根目录下新建一个文件夹并命名为:card 3.请准备一张jpg格式的身份证照片(本示例中的图片来自网络),并命名为1.jpg,放在card目录 4.请务必确保PHP对1.jpg有读权限(先用fopen('1.jpg', 'r')测试一下) 

本地上传图片预览

<!DOCTYPE html > <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览,获得图片的base64(可压缩)</title> <style type="text/css"> .upload_image {

浏览器显示本地照片 image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从

web前端效率提升之浏览器与本地文件的映射-遁地龙卷风

1.chrome浏览器,机制是拦截url, 1.在浏览器Element中调节的css样式可以直接同步到本地文件,反之亦然,浏览器会重新加载css,省去刷新 2.在source面板下对js的编辑可以同步到本地文件,反之亦然,浏览器会重新加载js,比如一些基于事件调用的函数, 更改之后再次被触发可以立马看到效果,省去刷新 3.对html的修该浏览器不会重新加载 更多的细节大家自行体会吧!2.设置方法 目录中要避免出现中文! 我的版本是49,不同版本位置可能会有出入 已file:///D:/curre