javascript實現(xiàn)圖片上傳前臺頁面

更新時間：2015年08月18日 14:05:19 作者：獨孤求索

這篇文章主要介紹使用javascript實現(xiàn)圖片上傳并在前臺頁面顯示，代碼很簡單，需要的朋友可以參考下

這篇文章主要通過代碼分析javascript實現(xiàn)圖片上傳前臺頁面，廢話不多說了，直接貼代碼了。

代碼示例一：

<script>
  //檢查圖片的格式是否正確,同時實現(xiàn)預覽
  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;
     }
    }
    //循環(huán)判斷圖片的格式是否正確 
    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查找它，會發(fā)現(xiàn)里面跟這差不多的東西。這時就應該懂了，upload_json.jsp設置url,title,width,height,order,align，前臺就可以使用了。

以上是本文對javascript實現(xiàn)圖片上傳前臺頁面的全部內容，希望大家喜歡。

您可能感興趣的文章:

原生JS實現(xiàn)隱藏顯示圖片 JS實現(xiàn)點擊切換圖片效果
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)隱藏顯示圖片，JS實現(xiàn)點擊切換圖片效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
javascript白色簡潔計算器
白色簡潔樣式計算器JS代碼是一款精美簡潔計算器JS代碼插件網頁特效，軟件應用，后臺應用JS計算器插件代碼免費下載。
2015-05-05
基于JavaScript實現(xiàn)屏幕滾動效果
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)屏幕滾動效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
echarts餅圖標簽formatter使用及餅圖自定義標簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網學習了一番,下面這篇文章主要給大家介紹了關于echarts餅圖標簽formatter使用及餅圖自定義標簽的相關資料,需要的朋友可以參考下
2022-12-12
JavaScript設計模式之中介者模式詳解
當對象之間進行多對多引用時，進行開發(fā)，維護，閱讀時將變得特別痛苦。在這些對象之間添加中間者，使它們都只與中介者，當中介者處理完一個對象的請求后，將結果通知于其他對象
2022-08-08
javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單
這篇文章主要介紹了javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單，實現(xiàn)JS年月日三級聯(lián)動下拉框選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
javascript實現(xiàn)實時輸出當前的時間
在網頁中實時的顯示時間，不但可以給網頁添色，還可以方便瀏覽者掌握當前時間，為了提高網站的開發(fā)速度，可以把主代碼封裝在一個單獨的函數(shù)里面，在需要的時候直接調用而我為了演示，直接寫在了主頁面，方便大家觀看
2015-04-04
layui 解決富文本框form表單提交為空的問題
今天小編就為大家分享一篇layui 解決富文本框form表單提交為空的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
JS實現(xiàn)的豎向折疊菜單代碼
這篇文章主要介紹了JS實現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動態(tài)遍歷頁面元素及樣式修改的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
openlayers實現(xiàn)地圖彈窗
這篇文章主要為大家詳細介紹了openlayers實現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09