javascript实现图片上传前台页面

前端技术 2023/09/09 JavaScript

这篇文章主要通过代码分析javascript实现图片上传前台页面，废话不多说了，直接贴代码了。

代码示例一：

<script>
  //检查图片的格式是否正确,同时实现预览
  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;
     }
    }
    //循环判断图片的格式是否正确 
    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查找它，会发现里面跟这差不多的东西。这时就应该懂了，upload_json.jsp设置url,title,width,height,order,align，前台就可以使用了。

以上是本文对javascript实现图片上传前台页面的全部内容，希望大家喜欢。

本文地址：https://www.stayed.cn/item/26033

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案