javascript实现图片上传前台页面


Posted in Javascript onAugust 18, 2015

这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了。

代码示例一:

<script>
  //检查图片的格式是否正确,同时实现预览
  function setImagePreview(obj, localImagId, imgObjPreview) {
   var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 
   if (obj.value == '') {
    $.messager.alert("提示", "让选择要上传的图片!");
    flag = false;
    return false;
   }
   else {
    var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用 
    ////布尔型变量 
    var isExists = false;
    var objValue = obj.value;
    try {
     //对于IE判断要上传的文件的大小 
     var fso = new ActiveXObject("Scripting.FileSystemObject");
     fileLenth = parseInt(fso.getFile(objValue).size);
    } catch (e) {
     try {
      //对于非IE获得要上传文件的大小 
      fileLenth = parseInt(obj.files[0].size);
     } catch (e) {
      flag = false;
      return false;
     }
    }
    //循环判断图片的格式是否正确 
    for (var i in array) {
     if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
      //图片格式正确之后,根据浏览器的不同设置图片的大小 
      if (obj.files && obj.files[0]) {
       //火狐下,直接设img属性 
       imgObjPreview.style.display = 'block';
       imgObjPreview.style.width = '180px';
       imgObjPreview.style.height = '200px';
       //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 
       imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
       if (fileLenth > 102400) {
        $.messager.alert("提示", "请选择小于100k的图片!");
        flag = false;
        return false;
       }
      }
      else {
       //IE下,使用滤镜 
       obj.select();
       var imgSrc = document.selection.createRange().text;
       //必须设置初始大小 
       localImagId.style.width = "180px";
       localImagId.style.height = "200px";
       //图片异常的捕捉,防止用户修改后缀来伪造图片 
       try {
        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
       }
       catch (e) {
        $.messager.alert("提示", "您上传的图片格式不正确,请重新选择!");
        flag = false;
        return false;
       }
       imgObjPreview.style.display = 'none';
       document.selection.empty();
      }
      isExists = true;
      flag = true;
      return true;
     }
    }
    if (isExists == false) {
     $.messager.alert("提示", "上传图片类型不正确!");
     flag = false;
     return false;
    }
    flag = false;
    return false;
   }
  } 
 </script>
<tr class="detailInfo">
    <td align="right">
     上传照片:
    </td>
    <td align="left" >
     <input type="file" id="idFile" name="idFile" width="150px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);" />
    </td> 
   </tr>
   <tr class="detailInfo">
    <td align="right">
     预 览:
    </td>
    <td>
     <div id="localImag">
      <img id="preview" alt="预览图片" src="../img/userphoto.jpg" style="width: 150px; height: 170px;" />
     </div>
    </td> 
   </tr>

代码示例二:

<!doctype html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title>ImageDialog Examples</title> 
  <link rel="stylesheet" href="../themes/default/default.css" /> 
  <script src="../kindeditor.js"></script> 
  <script src="../lang/zh_CN.js"></script> 
  <script> 
   KindEditor.ready(function(K) { 
    var editor = K.editor({ 
     allowFileManager : true 
    }); 
    K('#image1').click(function() { 
     editor.loadPlugin('image', function() { 
      editor.plugin.imageDialog({ 
       imageUrl : K('#url1').val(), 
       clickFn : function(url, title, width, height, border, align) { 
        K('#url1').val(url); 
        editor.hideDialog(); 
       } 
      }); 
     }); 
    }); 
    K('#image2').click(function() { 
     editor.loadPlugin('image', function() { 
      editor.plugin.imageDialog({ 
       showLocal : false, 
       imageUrl : K('#url2').val(), 
       clickFn : function(url, title, width, height, border, align) { 
        K('#url2').val(url); 
        editor.hideDialog(); 
       } 
      }); 
     }); 
    }); 
    K('#image3').click(function() { 
     editor.loadPlugin('image', function() { 
      editor.plugin.imageDialog({ 
       showRemote : false, 
       imageUrl : K('#url3').val(), 
       clickFn : function(url, title, width, height, border, align) { 
        K('#url3').val(url); 
        editor.hideDialog(); 
       } 
      }); 
     }); 
    }); 
   }); 
  </script> 
 </head> 
 <body> 
  <p><input type="text" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />(网络图片 + 本地上传)</p> 
  <p><input type="text" id="url2" value="" /> <input type="button" id="image2" value="选择图片" />(网络图片)</p> 
  <p><input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择图片" />(本地上传)</p> 
 </body> 
</html>

当点击选择图片时加载该js。然后复制imageDialog,在image.js查找它,会发现里面跟这差不多的东西。这时就应该懂了,upload_json.jsp设置url,title,width,height,order,align,前台就可以使用了。

以上是本文对javascript实现图片上传前台页面的全部内容,希望大家喜欢。

Javascript 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 #Javascript
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Python实现多线程的两种方式分析
2018/08/29 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python实现猜拳游戏项目
2020/11/30 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
计算机系本科生求职信
2014/05/31 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript