1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    jquery圖片上傳預覽 jQuery自定義圖片尺寸上傳預覽特效代碼 下載

    來源:腳本之家  責任編輯:小易  
    腳本大小:68KB 腳本語言:簡體中文 腳本類型:國產軟件 腳本授權:免費軟件 更新時間:2021-04-01 17:18:24 腳本類別:jQuery 相關鏈接: 未知官方  演示地址 網友評分:腳本評分 應用平臺:jquery

    自定義 圖片尺寸 上傳預覽。jQuery圖片上傳功能制作設置不同尺寸單張圖片上傳預覽效果。支持logo圖片,個人頭像,海報圖片上傳預覽代碼。

    代碼結構

    1. 引入CSS

    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">

    2. 引入JS

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>

    3. HTML代碼

    <div class="box">
        <p>上傳log</p>
        <p>
      <div class="upload imgLog">
          <span><i class="glyphicon glyphicon-open"></i>上傳log0</span>       </div>
        </p>
        <p>上傳頭像</p>
        <p>
      <div class="upload imgLog2">
                <span><i class="glyphicon glyphicon-open"></i>上傳頭像</span>     </div>
        </p>  
        <p>上傳海報</p>
        <p>
      <div class="upload imgLog3">
                <span><i class="glyphicon glyphicon-open"></i>上傳海報</span>     </div>
        </p>          
    </div>
    <script>
        $(function(){
            var img1 = new ImgUpload('.imgLog',210,55,55);
            var img2 = new ImgUpload('.imgLog2',100,100,100);
            var img3 = new ImgUpload('.imgLog3',400,200,200);
            $(document).on('change',".imgLog input",function(e){
                //模擬后臺返回url
                var url = window.URL.createObjectURL(e.target.files[0]);
                $(this).parent().css('background','url('+url+')0% 0% / cover')
                console.log(window.URL.createObjectURL(e.target.files[0]))
                img1.setSpan(this)
            })
            $(document).on('change',".imgLog2 input",function(e){
                //模擬后臺返回url
                var url = window.URL.createObjectURL(e.target.files[0]);
                $(this).parent().css('background','url('+url+')0% 0% / cover')
                img2.setSpan(this)
            })  
            $(document).on('change',".imgLog3 input",function(e){
                //模擬后臺返回url
                var url = window.URL.createObjectURL(e.target.files[0]);
                $(this).parent().css('background','url('+url+')0% 0% / cover')
                img3.setSpan(this)
            })                      
        })
    </script>

    文件目錄結構

    建議適用瀏覽器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。

    下載地址如下:

    網碩互聯電信下載

    港中數據電信下載

    河南紫田網通下載

    易陽網絡電信下載

  3. 本文相關:
  4. 求JS或jquery的上傳圖片帶預覽的代碼
  5. 用js、jquery如何實現上傳圖片的預覽
  6. js/jquery如何實現一張圖片的上傳預覽功能。。。。
  7. js圖片上傳 預覽效果
  8. jQuery File Upload 圖片預覽代碼如何寫
  9. 用jQuery圖片上傳怎樣實現實時預覽
  10. 怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還...
  11. 求js上傳圖片->預覽->剪裁后生成圖片->上傳的demo.
  12. js上傳圖片并且預覽功能
  13. javascript或jQuery 如何直接設置上傳圖片的大小,...
  14. 網站首頁腳本下載廣告代碼js框架批處理網頁相關源碼下載網站地圖菜單導航tab標簽焦 點 圖在線客服影音播放相冊代碼flash特效vbscript其它全屏廣告對聯廣告懸浮漂浮圖片特效翻牌書角其他代碼jqueryextjsprototypemootoolsajax/javascript其它框架系統優化網絡相關文件管理注冊表項文本字符安全防毒加密解密特效動畫修改更換顯示隱藏dos/bathtml5css特效asp源碼.net源碼php源碼jsp源碼網頁編輯器數據庫管理源碼黑客源碼其它源碼主頁腳本下載js框架jqueryjquery實現圖片上傳預覽 支持ie6/9jquery基于svg制作的多圖上傳帶縮略圖預覽特效源碼jquery formdata圖片上傳預覽插件特效源碼jquery實現簡單的頭像圖片上傳預覽效果源碼jquery實現的多張圖片上傳且預覽特效源碼jquery使用ssi-uploader插件實現可拖拽和帶預覽圖的文件上傳預覽jquery圖片上傳jquery 最新版框架下載(1.32-1.11.1-3.2.1)jquery 最新版框架下載(1.32-1.11.1-3.2.1)下載《jquery 1.6,1.7 api 中文手冊》最新版 chm《jquery 1.6,1.7 api 中文手冊》最新版 chm下載jquery easyui v1.3 常用ui組件 demo合集、離線api、動態換膚 jquery easyui v1.3 常用ui組件 demo合集、離線api、動態換膚 下載jquery alert、confirm、prompt提示框插件jquery alert、confirm、prompt提示框插件下載基于jquery的artdialog 彈出窗插件效果 4.1.7基于jquery的artdialog 彈出窗插件效果 4.1.7下載uploadify v3.1 基于jquery的上傳插件uploadify v3.1 基于jquery的上傳插件下載jquery 圖片切換(超炫效果)jquery 圖片切換(超炫效果)下載jquery 1.7.2官方版本下載jquery 1.7.2官方版本下載下載jqueyr 消息插件 messager v1.5 仿qq消息彈出提醒jqueyr 消息插件  messager v1.5 仿qq消息彈出提醒下載找不到分享碼?jquery自定義圖片尺寸上傳預覽特效代碼jquery全屏廣告圖片拖拽預覽ui布局特效源碼jquery實現的卡片式翻轉時鐘特效源碼jquery遮罩彈出縮略圖插件jquery表單驗證插件validate支持拓展jquery基于swiper.js可觸摸滑動的發展歷程時間軸特效jquery fixed-table.js鎖定表頭table插件特效代碼jquery實現的常見問題列表下拉收縮特效源碼jquery實現點名器隨機抽獎特效代碼jquery內嵌iframe導航菜單特效源碼分享碼的獲取方法迅雷winrar v5jquery自定義圖片尺寸上傳預覽特效代碼jquery全屏廣告圖片拖拽預覽ui布局特效源碼jquery實現的卡片式翻轉時鐘特效源碼jquery遮罩彈出縮略圖插件jquery表單驗證插件validate支持拓展jquery基于swiper.js可觸摸滑動的發展歷程時間軸特效jquery fixed-table.js鎖定表頭table插件特效代碼jquery實現的常見問題列表下拉收縮特效源碼jquery實現點名器隨機抽獎特效代碼jquery內嵌iframe導航菜單特效源碼chrome
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载