快捷導(dǎo)航

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

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

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

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

代碼示例一：

<script>
  //檢查圖片的格式是否正確,同時實現(xiàn)預(yù)覽
  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()) {
      //圖片格式正確之后，根據(jù)瀏覽器的不同設(shè)置圖片的大小 
      if (obj.files && obj.files[0]) {
       //火狐下，直接設(shè)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;
       //必須設(shè)置初始大小 
       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">
     預(yù) 覽:
    </td>
    <td>
     <div id="localImag">
      <img id="preview" alt="預(yù)覽圖片" 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="選擇圖片" />（網(wǎng)絡(luò)圖片 + 本地上傳）</p> 
  <p><input type="text" id="url2" value="" /> <input type="button" id="image2" value="選擇圖片" />（網(wǎng)絡(luò)圖片）</p> 
  <p><input type="text" id="url3" value="" /> <input type="button" id="image3" value="選擇圖片" />（本地上傳）</p> 
 </body> 
</html>

當(dāng)點擊選擇圖片時加載該js。然后復(fù)制imageDialog，在image.js查找它，會發(fā)現(xiàn)里面跟這差不多的東西。這時就應(yīng)該懂了，upload_json.jsp設(shè)置url,title,width,height,order,align，前臺就可以使用了。

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

您可能感興趣的文章: