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 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
layui--js控制switch的切换方法
Sep 03 Javascript
浅析js实现网页截图的两种方式
Nov 01 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
PHP个人网站架设连环讲(一)
2006/10/09 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
路政管理专业个人自荐信范文
2013/11/30 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
优乐美广告词
2014/03/14 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
初中生活随笔
2015/08/15 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
python实现简单反弹球游戏
2021/04/12 Python
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Django REST framework 限流功能的使用
2021/06/24 Python