javascript实现图片上传前台页面
这篇文章主要通过代码分析javascript实现图片上传前台页面，废话不多说了，直接贴代码了。
代码示例一：
<script>
//检查图片的格式是否正确,同时实现预览
functionsetImagePreview(obj,localImagId,imgObjPreview){
vararray=newArray('gif','jpeg','png','jpg','bmp');//可以上传的文件类型
if(obj.value==''){
$.messager.alert("提示","让选择要上传的图片!");
flag=false;
returnfalse;
}
else{
varfileContentType=obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];//这个文件类型正则很有用
////布尔型变量
varisExists=false;
varobjValue=obj.value;
try{
//对于IE判断要上传的文件的大小
varfso=newActiveXObject("Scripting.FileSystemObject");
fileLenth=parseInt(fso.getFile(objValue).size);
}catch(e){
try{
//对于非IE获得要上传文件的大小
fileLenth=parseInt(obj.files[0].size);
}catch(e){
flag=false;
returnfalse;
}
}
//循环判断图片的格式是否正确
for(variinarray){
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;
returnfalse;
}
}
else{
//IE下，使用滤镜
obj.select();
varimgSrc=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;
returnfalse;
}
imgObjPreview.style.display='none';
document.selection.empty();
}
isExists=true;
flag=true;
returntrue;
}
}
if(isExists==false){
$.messager.alert("提示","上传图片类型不正确!");
flag=false;
returnfalse;
}
flag=false;
returnfalse;
}
}
</script>
<trclass="detailInfo">
<tdalign="right">
上传照片:
</td>
<tdalign="left">
<inputtype="file"id="idFile"name="idFile"width="150px"runat="server"onchange="javascript:setImagePreview(this,localImag,preview);"/>
</td>
</tr>
<trclass="detailInfo">
<tdalign="right">
预览:
</td>
<td>
<divid="localImag">
<imgid="preview"alt="预览图片"src="../img/userphoto.jpg"style="width:150px;height:170px;"/>
</div>
</td>
</tr>
代码示例二：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8"/>
<title>ImageDialogExamples</title>
<linkrel="stylesheet"href="../themes/default/default.css"/>
<scriptsrc="../kindeditor.js"></script>
<scriptsrc="../lang/zh_CN.js"></script>
<script>
KindEditor.ready(function(K){
vareditor=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><inputtype="text"id="url1"value=""/><inputtype="button"id="image1"value="选择图片"/>（网络图片+本地上传）</p>
<p><inputtype="text"id="url2"value=""/><inputtype="button"id="image2"value="选择图片"/>（网络图片）</p>
<p><inputtype="text"id="url3"value=""/><inputtype="button"id="image3"value="选择图片"/>（本地上传）</p>
</body>
</html>
当点击选择图片时加载该js。然后复制imageDialog，在image.js查找它，会发现里面跟这差不多的东西。这时就应该懂了，upload_json.jsp设置url,title,width,height,order,align，前台就可以使用了。
以上是本文对javascript实现图片上传前台页面的全部内容，希望大家喜欢。