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中对Select的option项的添加、删除、取值
Aug 25 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
javascript中caller和callee详解
Aug 10 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
js继承实现方法详解
Dec 16 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 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编程效率技巧
2015/08/13 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python自定义时钟类、定时任务类
2021/02/22 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
小学美术教学反思
2014/02/01 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
python常见的占位符总结及用法
2021/07/02 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫