發現一個特別小巧的jquery外掛可以在選擇的時候顯示小圖
一個特表小的jQuery外掛，小到忽略不計了，它可以實現在上傳圖片的時候選擇圖片的回顯到頁面上，很好啊，很簡單
這是例子，也就是全部的程式碼了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script> //圖片上傳預覽 IE是用了濾鏡。 function previewImage(file) { var MAXWIDTH = 90; var MAXHEIGHT = 90; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>'; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; // img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else //相容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ){ param.width = maxWidth; param.height = Math.round(height / rateWidth); }else{ param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; } </script> </head> <body> <div id="addCommodityIndex"> <!--input-group start--> <div class="input-group row"> <div class="col-sm-3"> <label>商品圖片</label> </div> <div class="col-sm-9 big-photo"> <div id="preview"> <img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();"> </div> <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg"> <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">--> </div> </div> <!--input-group end--> </div> </body> </html>
加入上述程式碼後給一個檔案目錄，這裡用的是img
然後給一張預設的圖就好了，至此就全部結束了，也不需要引入任何的東西
相關推薦
發現一個特別小巧的jquery外掛可以在選擇的時候顯示小圖
一個特表小的jQuery外掛，小到忽略不計了，它可以實現在上傳圖片的時候選擇圖片的回顯到頁面上，很好啊，很簡單 這是例子，也就是全部的程式碼了<!DOCTYPE html> <html lang="en"> <head> <
推薦一個內容滾動jquery外掛
myslider是一個內容滾動jquery外掛，版本0.1.2的每次滾動內容是一行內容，可以是文字，可以是一個連結，還可以是圖片。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myslider
用一個案例介紹jQuery外掛的使用和寫法
我們在做web的時候都會用到很多jQuery外掛，這些外掛可以很方便的使用。但對於初學者來說想要修改外掛中的一些功能，或者想要自定義外掛卻不是容易的事情。自己也剛好在學習這部分的知識，這裡用一個案例來介紹jQuery外掛的使用和寫法。 就拿單頁導航
jQuery滑鼠經過顯示大圖
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5
如何編寫jquery外掛之輪播圖
對於一位合格的前端開發人員來說，首頁圖片輪播可謂是必會的基本功。那麼我們聊一聊如何用jquery封裝自己的輪播外掛。 首先必須要聊到的jquery為我們提供的兩大擴充套件方法，$.fn和$.extend(),$.extend相當於為jQuery類（注意，JavaScript
jquery外掛laydate(v5.0)與validate關於選擇日期校驗的衝突
問題1：點選日期控制元件後驗證的是上一次選擇的時間（第一次點選無值） 解決：laydate日期控制元件在值尚未回寫是jquery就已經觸發校驗，所以每次校驗的是之前的資料，現新增日期回寫後觸發事件，再次單獨校驗該欄位即可。 laydate.render({ elem: '#b
【jQuery外掛分享】Cropper——一個簡單方便的圖片裁剪外掛
原文地址：https://segmentfault.com/a/1190000012344970 外掛介紹 這是一個我在寫以前的專案的途中發現的一個國人寫的jQuery影象裁剪外掛，當時想實現使用者資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少
jquery-ui日期外掛datepicker顯示時分
一、日期外掛datepicker顯示年月日(見效果一) 引入如下檔案： <script src="lib/jQuery/jquery-ui.min.js"></script> <script src="lib/jQuery/jquery-ui-timepicke
jquery 模仿時鐘顯示效果 clockPlugin外掛
clockPlugin相容性 clockPlugin外掛是在jQuery的基礎上開發的，所以clockPlugin使用需事先引入jQuery。 clockPlugin下載 連結：https://p
jQuery外掛實現select下拉框左右選擇_交換內容（multiselect2side） 的一些網站 (有時間整理)
http://blog.csdn.net/mexican_jacky/article/details/51151495 http://blog.csdn.net/nihaoma71121/article/details/50971672 http://www.t
一個簡單的jquery圖片輪播外掛
前提佈局： 左浮li標籤，支援左右切換，自動輪播，原始碼： 引數：ul： 需要動畫的ul prev：上一個切換按鈕 next： 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li
一個簡單的jquery省級聯動外掛
由於專案需要實現省級聯動的效果，於是找了個簡單的外掛，需求基本都可以實現 一、 先儲存地區資料檔案 命名為areaData.js/** * 儲存地區資訊 * 資料格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北
jQuery外掛開發精品教程，讓你的jQuery提升一個臺階
要說jQuery 最成功的地方，我認為是它的可擴充套件性吸引了眾多開發者為其開發外掛，從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣，得平臺者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平臺及生態圈。 學會使用jQuery並不難，因為它簡單易學，並且相信你接觸jQuery後肯定也使用或熟悉了不少其外掛
jQuery日期選擇外掛WdatePicker使用方法.日期範圍限制
1. 跨無限級框架顯示 無論你把日期控制元件放在哪裡,你都不需要擔心會被外層的iframe所遮擋進而影響客戶體驗,因為My97日期控制元件是可以跨無限級框架顯示的 示例2-7 跨無限級框架演示 可無限跨越框架iframe,無論怎麼巢狀框架都不必擔心了,即使有滾動條也不怕 2. 民國年日曆和其他特殊日曆 當年份
推薦一個挺好用的jquery外掛，jquery.jqplot.js（畫圖）,此處簡略得說一下折線圖的畫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
jQuery Handsontable【jQuery外掛-一個非常酷的可編輯表格】
jQuery Handsontable 是jQuery外掛中一款非常酷的可編輯的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款類似於Exce
jQuery外掛 下拉列表日期選擇控制元件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type"
jQuery外掛layer擴充套件：解決大圖顯示時，圖片的比例問題
html核心： <div class="carimgtd"> <div style="height:200px"> <img src="i
如何封裝一個最簡單的jquery外掛
一個完整的jquery當然不可能這麼簡單，以下案例提供的是一種封裝外掛的思路 在此之前你最好有一定的js基礎，並且懂得自呼叫匿名函式的基本使用，廢話少說，直接上程式碼： HTML部分 <!DOCTYPE html> <html lan
jquery-chosen 選擇框外掛
Chosen 是一個JavaScript外掛，它能讓醜陋的、很長的select選擇框變的更好看、更方便,不僅如此，它更擴大了，增長了主動篩選的功能。它可對列表進行分組，同時也可禁用某些選擇項。目前，它支援 jQuery 和 Prototype 兩種JavaScript引擎