jquery图片上传前预览 无需上传至服务器

  • q7_417989
    了解作者
  • 36.5KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-09 00:26
    上传日期
图片上传前预览,无需上传至服务器 同时可以进行图片剪切
jquery图片上传前预览 无需上传至服务器.rar
  • 上传前预览和剪切
  • jquery.crop.js
    4.4KB
  • imgup.css
    3.5KB
  • imgpreview.html
    2.2KB
  • jquery-1.8.3.min.js
    91.4KB
  • imagepreview.js
    2.7KB
内容介绍
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片上传前预览</title> <link href="imgup.css" rel="stylesheet" type="text/css"> <style type="text/css"> ::-moz-focus-inner{ padding: 0; border: 0; } .ui_button, .ui_fileup { vertical-align: middle; border: 1px solid #ccc; display: inline-block; padding: 5px 10px; background: #FFF; font-size: 12px; *overflow: visible; *display: inline; *zoom: 1; } .ui_fileup { position: relative; overflow: hidden; } .ui_fileup input { filter: alpha(opacity=1); position: absolute; background: #fff; font-size: 60px; cursor: default; width: auto; opacity: 0; z-index: 1; left: auto; right: 0; top: 0; } .avataria .cont { text-align: center; min-height: 1%; margin: 25px; width: 302px; _zoom: 1; } .avataria form { text-align: left; overflow: hidden; } .avataria .cont:after { content: ""; display: block; overflow: hidden; height: 0; clear: both; } .thumb { float: right; height: 120px; width: 120px; } .cropaera { clear: both; } .preview { height: 300px; width: 300px; } </style> </head> <body> <div class="avataria" title="头像上传前预览"> <div class="cont"> <div class="thumb"></div> <form enctype="application/x-www-form-urlencoded"> <div class="ui_fileup"><input type="file" id="file" accept="image/*" onerror="alert('请选择一个图片')">浏览</div> &nbsp; <input type="submit" class="ui_button" value="保存"> <input name="crop" type="hidden"> </form> </div> <div class="cont"> <div id="preview" class="preview"></div> </div> </div> <script src="jquery-1.8.3.min.js"></script> <script src="imagepreview.js"></script> <script src="jquery.crop.js"></script> <script> imagepreview(document.getElementById("file"), document.getElementById("preview"), function(info){ //alert("文件名:" + info.name + "\r\n图片原始高度:" + info.height + "\r\n图片原始宽度:" + info.width); //这里若return false则不预览图片 $("#preview").css({ background: "none" }); $("#preview").crop( function(e){ $("input[type='hidden']").val([e.top, e.left, e.height, e.width].toString()); }, ".thumb"); }); </script> </body> </html>
评论
    相关推荐
    • jQuery各大云服务器门户幻灯片轮播
      jQuery各大云服务器门户幻灯片轮播
    • 使用JQuery服务器端参数化方法调用
      此演示演示了jquery如何调用服务器端参数化方法。
    • jQuery服务器购买抽奖活动源代码
      jQuery服务器购买抽奖活动源代码是一款红色的九宫格抽奖源代码下载。
    • jquery i18n
      jquery-i18n-properties,实现web多语言,并实现了持久化,代码需要在服务器中访问。
    • JQuery 及插件实现图片剪切分割上传服务器
      最近做一个项目的图像上传功能,这个功能就是类似与大型网站的图像上传功能。上传切割主要是相对于起点的四个偏移量,left、top、width、height值,然后在后台进行切割显示给会员。
    • jQuery饼状图服务器资源图表统计代码
      jQuery饼状图服务器资源图表统计代码,一款展示服务器新的访问,跳出率,负载等资源使用情况图表统计数据代码。
    • jQuery饼图服务器资源统计代码.zip
      jQuery饼图服务器资源统计代码是一款服务器新的访问,跳出率,负载,使用情况等canvas图表统计数据模板代码。
    • jquery.easing
      请将脚本上传到您自己的服务器并更新指向gsgd.co.uk任何 url 以使用该版本的文件,或者您可以尝试将上述 url 用于 CDN(尽管目前只有 1.3 缓动脚本,请查看了解更多信息,也许可以尝试添加任何丢失的文件/仍在使用...
    • jquery.Thailand.js:服务器端!
      jquery.Thailand.js งใช้ย!รอกที่อยู่ที่ดีที่สุดในไทยไม่ต้องใช้服务器端! อ่านแนวคิดและที่มาที่ไป ต้องการปรับปรุงฐรข...
    • jQuery饼图服务器资源统计特效代码
      jQuery饼图服务器资源统计代码是一款服务器新的访问,跳出率,负载,使用情况等canvas图表统计数据模板代码。