`

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

    博客分类:
  • 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 ");
      }  
    }
 }

分享到:
评论

相关推荐

    C#WINFROM多张多图片预览和批量上传

    - PictureBox控件:预览图片的主要工具,可以在设计时或运行时设置Image属性来显示图片。 - DragDrop事件:允许用户通过拖放操作将图片从文件资源管理器拖放到PictureBox控件上。 - OpenFileDialog控件:提供一个...

    上传 预览 文字水印 图片水印

    这涉及到前端的表单提交、Ajax异步上传、文件大小限制、文件类型检查等技术。在Web应用中,HTML5的File API提供了强大的文件操作能力,允许在浏览器端进行文件读取、预览等功能。后端则需要处理文件接收、存储和安全...

    基于ASP的远程图片自动按上传.zip

    【标题】"基于ASP的远程图片自动按上传"是一个关于使用Active Server Pages (ASP)技术实现远程图片上传功能的项目。ASP是微软开发的一种服务器端脚本环境,用于创建动态网页或Web应用程序。这个项目的核心目标是允许...

    无刷新上传--可生成缩略图--demo.zip

    在"PHP上传类"中,通常会包括验证文件类型、大小,处理文件移动或复制,以及错误处理等功能。在DEMO中,这部分代码可能隐藏在`index.php`中,或者在与之配合的其他PHP脚本里。当用户选择文件后,这些脚本会被调用,...

    同时上传多张图片tt

    用户选择图片后,JavaScript可以用于预览图片,验证文件类型和大小,以及准备数据进行上传。 2. **文件分块**:由于文件大小限制或网络带宽问题,前端可能需要将大图片分割成小块再上传。这种方式称为分块上传,常...

    图片上传(水印、缩略图、远程保存)源码.zip

    这个"图片上传(水印、缩略图、远程保存)源码.zip"压缩包包含了一个实现这些功能的源代码集,对于开发者来说,这是一个宝贵的资源,可以深入理解图片处理的各个环节,并且能够快速集成到自己的项目中。 1. **图片...

    图片上传(水印、缩略图、远程保存)源码

    这个过程通常涉及到前端的文件选择、预览和上传功能,以及后端的文件接收、验证和存储。 - 前端通常使用HTML5的`&lt;input type="file"&gt;`元素让用户选择图片,然后通过AJAX或者Fetch API异步上传。 - 后端需要处理...

    fckeditor 2.5.1(带远程图片保存)

    同时,可以通过JavaScript事件监听和自定义插件,扩展编辑器的功能,如添加图片预览、拖放上传等。 6. **代码示例**:在ASP.NET页面中,可以使用以下代码片段来创建FCKeditor实例: ```html ...

    ASP实例开发源码-远程图片自动按上传.zip

    这个"ASP实例开发源码-远程图片自动按上传.zip"是一个包含ASP代码示例的压缩包,用于实现从远程位置抓取并上传图片的功能。在Web开发中,这种功能通常用于获取社交媒体或其他网站上的图片,或者为用户提供一个自动...

    手写单张图片上传ssh

    确保验证文件类型、大小,甚至进行内容扫描,防止恶意文件上传。 9. **性能优化**: 考虑到大文件上传的性能,可以采用分块上传、断点续传等技术。同时,合理设置服务器的内存和磁盘限制,避免资源耗尽。 10. **...

    分页-上传图片-MD5加密-验证码-在线编辑器\(本例为在线编译器)

    图片上传需要考虑的安全问题包括文件类型限制、大小限制以防止DoS攻击,以及对上传文件进行恶意代码扫描。 MD5(Message-Digest Algorithm 5)是一种广泛使用的哈希函数,用于生成数据的固定长度摘要。在Web应用中...

    流程表单中设置可以直接上传图片的功能1

    为了防止恶意文件上传或超出存储空间,系统需要设置合理的上传限制,比如限制文件类型(仅接受图片格式),限制文件大小,甚至可以进行文件内容的预览和检查。此外,还需要考虑数据隐私,确保上传的图片不会被未经...

    C#中图片上传不是保存在物理磁盘上的方法

    为了提高用户体验,我们还可以添加一些额外功能,比如图片预览、缩略图生成、大小限制等。例如,使用`System.Drawing`或`SixLabors.ImageSharp`库可以处理图片,生成缩略图。 此外,考虑到文件上传的安全性,应确保...

    uploaddemo上传

    5. **文件类型和大小限制**:为了防止恶意文件上传和服务器空间被滥用,需要对上传的文件类型和大小进行限制。 6. **分块上传**:对于大文件,可以采用分块上传策略,提高上传效率和成功率。 7. **错误处理**:...

    利用Ajax 和一般处理程序上传图片到指定文件夹.rar

    总结起来,通过Ajax和一般处理程序,我们可以实现图片的异步上传,同时将图片保存到服务器文件系统和数据库。这种方式提高了用户体验,避免了页面刷新,使得图片上传过程更加流畅。在实际应用中,还需要考虑错误处理...

    dwr3实现的无刷新文件上传

    - **后台处理**:服务器接收到文件数据后,将其保存到指定位置,并可能执行一些验证(如文件类型、大小限制)。 - **反馈结果**:服务器返回处理结果(成功或失败信息)给前端,通过DWR更新页面状态。 4. **关键...

    Thinkphp框架+Layui实现图片/文件上传功能分析

    图片/文件上传功能是网站开发中常见且重要的功能之一,通过Thinkphp框架与Layui相结合,可以轻松实现一个高效且易用的文件上传系统。 在Thinkphp框架中实现文件上传功能,通常需要使用Thinkphp提供的文件上传类...

    文件上传到服务器例子

    确保对上传文件进行验证,限制可上传的文件类型和大小,并存储文件在安全的目录结构中,避免直接暴露在公共URL下。 7. **用户体验**: 为了提供良好的用户体验,文件上传通常会包含进度条、错误提示等交互元素,让...

    上传文件代码

    同时,验证文件类型以确保上传的安全性,例如只允许特定格式的图片或文档。 5. 异步上传与进度反馈 使用Ajax或Fetch API进行异步上传,可以提供更好的用户体验,如显示上传进度条。例如,使用jQuery的`$.ajax`或`...

    文件上传下载

    3. 验证文件内容:对于图片等媒体文件,可以通过验证其头部信息确保文件真实性质。 4. 重命名上传文件:避免文件名冲突和路径遍历攻击,服务器端接收到文件后,应该生成随机或有序的新文件名。 五、文件下载 文件...

Global site tag (gtag.js) - Google Analytics