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实现图片上传前台页面的全部内容，希望大家喜欢。