提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

ajax异步上传文件FormDate方式，html支持才可使用

文件上传AJAXHTML异步 方式 支持 使用
2023-09-14 08:58:30 时间

今天需要做一个头像的预览功能，所以我想到了异步上传文件。

总结几点：

异步上传难点：

文件二进制流如何获取

是否需要设置表单的头，就是content-Type那里。异步，所以无所谓了吧。

其他就差不多了。

 

 

 

直接上demo：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/Utils.js"></script>
    
    <script type="text/javascript">
    
    $(function(){
        $("#upload").on('click', function() {  
               $('#fileToUpload').click(); 
            });  
      
        //选择文件之后执行上传  
        $('#fileToUpload').change(function() {  
             var formData = new FormData();//生成空的form对象
               formData.append("myphoto",$("#fileToUpload")[0].files[0]);//把该文件对象放入formData
            $.ajax({  
                url:g_basePath+"/FileUploadServlet",  
                data:formData,
                type:"POST",
                processData:false, //这个和jquery中formData有关，去除会报错。具体没研究
                contentType:false, //这个和头contentType有关，去除后在后台无法获得上传的二进制流
                success: function (data) {  
                    //把图片替换  
                    $("#upload").attr("src", data);  
                } 
            }); 
        });  
    });
    
    </script>
    
  </head>
  
  <body>
    <div>
        <div style="width:180px;height:180px;border:solid 1px;">
                        <img id="upload" alt="" style="width: 180px; height: 180px"  
    src="${pageContext.request.contextPath }/images/defaultphoto.jpg">  
                        <!-- 隐藏file标签 -->  
                        <input id="fileToUpload" style="display: none" type="file" name="myphoto">
        </div>            
    </div>
  </body>
</html>

 

 

上传时文件使用的是FormData对象，有时间去研究。有人看了我的之后研究了希望回馈一份更好的异步文件上传给我哦，原生js的最好也来一份。哈哈，反哺。

 

相关文章