`

远程上传 上传之前预览图片,可以验证类型,大小

    博客分类:
  • web
阅读更多

1.upload_http.jsp:

<style>
 body,td{font-size:12px;}
 </style>
 <script type="text/javascript">
 
 
  
  var ImgObj=new Image();//建立一个图像对象
  
  var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
  var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性
  
  //以下为限制变量
  var AllowExt=".jpg|.gif|.doc|.txt|"//允许上传的文件类型 &#320;为无限制 每个扩展名后边要加一个"|" 小写字母表示
  //var AllowExt=0
  var AllowImgFileSize=70;//允许上传图片文件的大小 0为无限制  单位:KB
  var AllowImgWidth=500;//允许上传的图片的宽度 &#320;为无限制 单位:px(像素)
  var AllowImgHeight=500;//允许上传的图片的高度 &#320;为无限制 单位:px(像素)
  
  HasChecked=false;
  
  function CheckProperty(obj)//检测图像属性
  {
    FileObj=obj;
    if(ErrMsg!="")//检测是否为正确的图像文件 返回出错信息并重置
    {
      ShowMsg(ErrMsg,false);
      return false;//返回
    }
  
    if(ImgObj.readyState!="complete")//如果图像是未加载完成进行循环检测
    {
      setTimeout("CheckProperty(FileObj)",500);
      return false;
    }
  
    ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
    ImgWidth=ImgObj.width//取得图片的宽度
    ImgHeight=ImgObj.height;//取得图片的高度
    FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px";
    FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb";
    FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt;
  
    if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth)
      ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px";
  
    if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight)
      ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px";
  
    if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
      ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB";
  
    if(ErrMsg!="")
      ShowMsg(ErrMsg,false);
    else
      ShowMsg(FileMsg,true);
  }
  
  ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'}
  
  function ShowMsg(msg,tf)//显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容
  {
    msg=msg.replace("\n","<li>");
    msg=msg.replace(/\n/gi,"<li>");
    if(!tf)
    {
      document.all.UploadButton.disabled=true;
      FileObj.outerHTML=FileObj.outerHTML;
      MsgList.innerHTML=msg;
      HasChecked=false;
    }
    else
    {
      document.all.UploadButton.disabled=false;
      if(IsImg)
        PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"
      else
        PreviewImg.innerHTML="非图片文件";
      MsgList.innerHTML=msg;
      HasChecked=true;
    }
  }
  
  function CheckExt(obj)
  {
    ErrMsg="";
    FileMsg="";
    FileObj=obj;
    IsImg=false;
    HasChecked=false;
    PreviewImg.innerHTML="预览区";
    if(obj.value=="")return false;
    MsgList.innerHTML="文件信息处理中...";
    document.all.UploadButton.disabled=true;
    FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
    if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1)//判断文件类型是否允许上传
    {
      ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt;
      ShowMsg(ErrMsg,false);
      return false;
    }
  
    if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果图片文件,则进行图片信息处理
    {
      IsImg=true;
      ImgObj.src=obj.value;
      CheckProperty(obj);
      return false;
    }
    else
    {
      FileMsg="\n文件扩展名:"+FileExt;
      ShowMsg(FileMsg,true);
    }
   
  }
  
  function SwitchUpType(tf)
  {
      if(tf)
       str='<input type="file" name="uploadFile" onchange="CheckExt(this)" style="width:180px;">'
      else
       str='<input type="text" name="uploadFile" onblur="CheckExt(this)" style="width:180px;">'
      document.all.uploadFile.outerHTML=str;
     // document.all.UploadButton.disabled=true;
      MsgList.innerHTML="";
  }


 </script>
 
 
 
 <form action="uploadH.do"  method="POST">
 <fieldset style="width: 372; height: 60;padding:2px;">
 <legend><font color="#FF0000">图片来源</font></legend>
 <input type="radio" name="radio1" checked="checked" onclick="SwitchUpType(true);">本地<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程:<input type="file" name="uploadFile" onchange="CheckExt(this)" style="width:180px;"> <input type="submit" id="UploadButton" value="开始上传"><br>
 <div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;">
 <table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table>
 </div>
 </fieldset>
 </form>


mm<sup>2</sup>

2.uploadH.do: (上传远程文件到到服务器到根文件来下)

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyUploadHttp extends HttpServlet {

 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request,response);
 }

 @Override
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  
  String strUrl=request.getParameter("uploadFile");
  System.out.println(strUrl);
  try{ //读取文件路径
        URL   url   =   new   URL(strUrl);
        HttpURLConnection   urlCon   =   (HttpURLConnection)url.openConnection();
        urlCon.setConnectTimeout(5000);
        BufferedInputStream   in=new   BufferedInputStream(
        urlCon.getInputStream());
        //写入文件路径
        String path=request.getRealPath("/");
        String fileName=strUrl.substring(strUrl.lastIndexOf("/")+1);
        path=path+fileName;
        System.out.println(path);
        BufferedOutputStream   out=new   BufferedOutputStream(new   FileOutputStream(path));
        String   inputLine= " ";
        byte[] buf=new byte[1024];
        int len=0;
        while((len=in.read(buf))>0){
          //System.out.println(inputLine);
          out.write(buf,0,len);
          out.flush();
        }
        in.close();
        out.close();
       
       
        // urlCon.setReadTimeout(5000);
      /*  BufferedReader   in=new   BufferedReader(new   InputStreamReader(
    urlCon.getInputStream()));
        //写入文件路径
        String path=request.getRealPath("/");
        String fileName=strUrl.substring(strUrl.lastIndexOf("/")+1);
        path=path+fileName;
        System.out.println(path);
        BufferedWriter   out=new   BufferedWriter(new   FileWriter(path));
        String   inputLine= " ";
        while((inputLine=in.readLine())!=null){
          //System.out.println(inputLine);
          out.write(inputLine);
          out.flush();
        }
        in.close();
        out.close();
        */
      }catch(IOException   e){
        System.out.println( "error ");
      }  
    }
 }

分享到:
评论

相关推荐

    Cloudreve免费开源网盘系统 v1.0.3

    快速对接多家云存储,支持七牛、又拍云、阿里云OSS、AWS S3、自建远程服务器,当然,还有本地存储可限制单文件最大大小、MIMEType、文件后缀、用户可用容量基于Aria2的离线下载图片、音频、视频、文本、Markdown、...

    超实用的jQuery代码段

    8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 ...

    iSee视频监控 v5.2

    在使用本监控卡之前,请详细阅读本说明书所涉及的相关事项,熟悉 硬件、软件各部分的功能后,方能使用,以确保该系统为您发挥最佳功能。 否则一切后果自负。 本说明书将向您详细阐述全实时“视频监控系统”的安装、...

    Cloudreve免费开源网盘系统

    图片、音频、视频、文本、Markdown、Ofiice文档 在线预览 移动端全站响应式布局 文件、目录分享系统,可创建私有分享或公开分享链接 用户个人主页,可查看用户所有分享 多用户系统、用户组支持 初步完善的后台,方便...

    JspRun!社区论坛系统 v6.0 bulid 090423 GBK 源码版.rar

    17、修复了编辑主题时缺少主题分类选项,显示信息类别的效果及不能预览远程附件服务器上的图片 18、修复了Archiver 功能在 URL 非静态化的条件下无法正常访问 19、修复了论坛会员个人设置时区无效 20、修复了...

    JspRun!社区论坛系统 v6.0 bulid 090424 GBK 安装版.rar

    17、修复了编辑主题时缺少主题分类选项,显示信息类别的效果及不能预览远程附件服务器上的图片 18、修复了Archiver 功能在 URL 非静态化的条件下无法正常访问 19、修复了论坛会员个人设置时区无效 20、修复了...

    Google Android SDK开发范例大全(PDF高清完整版3)(4-3)

    8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报!——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——...

    Google Android SDK开发范例大全(PDF完整版4)(4-4)

    8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报!——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——...

    Google Android SDK开发范例大全(PDF高清完整版1)(4-1)

    8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报!——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——...

    google android sdk开发范例大全 第二版 PDF 光盘代码

     7.15 相机预览及拍照临时文件   7.16 拍照瞬间启动相机自动对焦   7.17 制作开场动画   7.18 我的手机会说话   7.19 手势触控屏幕控制   7.20 多点触控屏幕事件捕捉  第8章 当Android与...

    Visual C++程序开发范例宝典(光盘) 第四部分

    Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...

    Visual C++程序开发范例宝典(光盘) 第八部分

    Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例...

    Google Android SDK开发范例大全的目录

    8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报!——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——...

    Google+Android+SDK开发范例大全

    3.3 更改TextView文字颜色——引用Drawable颜色常数及背景色 3.4 置换TextView文字——CharSequence数据类型与ResourceID应用 3.5 取得手机屏幕大小——DisplayMetrics取得画面宽高的方法 3.6 样式化的定型对象——...

    Google Android SDK开发范例大全(完整版附部分源码).pdf

    8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报!——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——...

Global site tag (gtag.js) - Google Analytics