• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5拖拽文件到浏览器并实现文件上传下载功能代码

    先上代码,写的jsp页面,后台是tomcat服务器,所以页面里有一些java的代码,如果后台用其他语言可以无视:

    复制代码
    代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.io.*"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>上传、下载文件</title>
    <style type="text/css">
    #filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
    }
    #filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
    }
    </style>
    </head>
    <body>
    <form id="upload" action="UploadServlet" enctype="multipart/form-data"
    method="post" onsubmit="return upLoad();">
    <p>
    <label for="fileselect">file name:</label><input multiple="true"
    type="file" id="fileselect" name="fileselect[]" />
    <div id="filedrag">或者将文件拖拽到这里</div>
    <div id="submitbutton">
    <input type="submit" value="提交">
    </div>
    </form>
    <div id="messages">
    </div>
    <% //java代码,显示服务器上可以供下载的文件
    File f = new File("G://defggg/");
    File[] list = f.listFiles();
    for (int i = 0; i < list.length; ++i) {
    System.out.println(list[i].getName());
    out.print("<a href='DownloadServlet?filename="
    + list[i].getName() + "'>" + list[i].getName()
    + "</a><br/>");
    }
    %>
    <script type="text/javascript">
    var upfiles = new Array();
    // getElementById
    function $id(id) {
    return document.getElementById(id);
    }
    // output information
    function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
    }
    // file drag hover
    function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
    }
    // file selection
    function FileSelectHandler(e) {
    // cancel event and hover styling
    FileDragHover(e);
    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;
    // process all File objects
    for ( var i = 0, f; f = files[i]; i++) {
    ParseFile(f);
    upfiles.push(f);
    }
    }
    // output file information
    function ParseFile(file) {
    Output("<p>文件信息: <strong>" + file.name
    + "</strong> 类型: <strong>" + file.type
    + "</strong> 大小: <strong>" + file.size
    + "</strong> bytes</p>");
    }
    function upLoad() {
    if (upfiles[0]) {
    var xhr = new XMLHttpRequest(); //Ajax异步传输数据
    xhr.open("POST", "UploadServlet", true);
    var formData = new FormData();
    for ( var i = 0, f; f = upfiles[i]; i++) {
    formData.append('myfile', f);
    }
    xhr.send(formData);
    xhr.onreadystatechange=function(e){
    history.go(0); //由于这个页面还要显示可以下载的文件,所以需要刷新下页面
    }
    return false;
    }
    }
    // initialize
    function Init() {
    var fileselect = $id("fileselect"), filedrag = $id("filedrag"), submitbutton = $id("submitbutton");
    // file select
    fileselect.addEventListener("change", FileSelectHandler, false);
    // is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
    // file drop
    filedrag.addEventListener("dragover", FileDragHover, false);
    filedrag.addEventListener("dragleave", FileDragHover, false);
    filedrag.addEventListener("drop", FileSelectHandler, false);
    filedrag.style.display = "block";
    // remove submit button
    //submitbutton.style.display = "none";
    }
    }
    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
    Init();
    }
    </script>
    </body>
    </html>

    附上后台处理上传下载的servlet,用了smartUpLoad,不能很好的解决中文问题:

    复制代码
    代码如下:

    package com.hit.software;
    import java.io.IOException;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import com.jspsmart.upload.Files;
    import com.jspsmart.upload.SmartUpload;
    /**
    * Servlet implementation class UploadServlet
    */
    @WebServlet("/UploadServlet")
    public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private ServletConfig config;
    final public void init(ServletConfig config) throws ServletException {
    this.config = config;
    }
    /**
    * @see HttpServlet#HttpServlet()
    */
    public UploadServlet() {
    super();
    // TODO Auto-generated constructor stub
    }
    /**
    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    * response)
    */
    protected void doGet(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
    }
    /**
    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    * response)
    */
    protected void doPost(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    // String s = request.getParameter("pic");
    // System.out.println(s);
    SmartUpload mySmartUpload = new SmartUpload();
    try {
    mySmartUpload.initialize(config, request, response);
    mySmartUpload.setMaxFileSize(150 * 1024 * 1024);
    mySmartUpload.setTotalMaxFileSize(150 * 1024 * 1024);
    // mySmartUpload.setAllowedFilesList("doc,txt,rar,pdf,png");
    mySmartUpload.setDeniedFilesList("exe");
    mySmartUpload.upload();
    Files f = mySmartUpload.getFiles();
    int size = f.getCount();
    for (int i = 0; i < size; ++i) {
    String fileName = mySmartUpload.getFiles().getFile(i)
    .getFileName();
    fileName = new String(fileName.trim().getBytes(), "UTF-8"); //能解决部分中文问题
    System.out.println("filename=" + fileName);
    if (!fileName.equals("")) {
    String path = "g:/defggg/" + fileName;
    f.getFile(i).saveAs(path, SmartUpload.SAVE_PHYSICAL);
    }
    }
    } catch (Exception e) {
    e.printStackTrace();
    System.out.println("Unable to upload the file.");
    System.out.println("Error :" + e.toString());
    }
    response.sendRedirect("index.jsp");
    }
    }


    复制代码
    代码如下:

    package com.hit.software;
    import java.io.File;
    import java.io.IOException;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.jsp.JspFactory;
    import javax.servlet.jsp.JspWriter;
    import javax.servlet.jsp.PageContext;
    import com.jspsmart.upload.SmartUpload;
    import com.jspsmart.upload.SmartUploadException;
    /**
    * Servlet implementation class DownloadServlet
    */
    @WebServlet("/DownloadServlet")
    public class DownloadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private ServletConfig config;
    /**
    * @see HttpServlet#HttpServlet()
    */
    public DownloadServlet() {
    super();
    // TODO Auto-generated constructor stub
    }
    final public void init(ServletConfig config) throws ServletException {
    this.config = config;
    }
    /**
    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    * response)
    */
    protected void doGet(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
    }
    /**
    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    * response)
    */
    protected void doPost(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    String fileName = request.getParameter("filename");
    System.out.println("down :"+fileName);
    if (fileName == null) {
    response.sendRedirect("index.jsp");
    return;
    }
    fileName = "G://defggg//" + fileName;
    File f = new File(fileName);
    if (f.exists() && f.isFile()) {
    SmartUpload su = new SmartUpload();
    su.initialize(config, request, response);
    su.setContentDisposition(null);
    try {
    su.downloadFile(fileName);
    } catch (SmartUploadException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }
    } else {
    response.sendRedirect("index.jsp");
    return;
    }
    }
    }

    上一篇:将HTML5 Canvas的内容保存为图片借助toDataURL实现
    下一篇:HTML5使用DOM进行自定义控制示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5拖拽文件到浏览器并实现文件上传下载功能代码 HTML5,拖拽,文件,到,浏览器,