zoukankan      html  css  js  c++  java
  • ajax异步上传文件FormDate方式,html支持才可使用

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

    总结几点:

    异步上传难点:

    文件二进制流如何获取

    是否需要设置表单的头,就是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="180px;height:180px;border:solid 1px;">
                            <img id="upload" alt="" style=" 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的最好也来一份。哈哈,反哺。

  • 相关阅读:
    Asp.net全局资源文件( App_GlobalResources)和本地资源文件(App_LocalResources)
    基于bootstrap3.3.4的简单框架搭建(左侧导航收起滚动)
    jquery file upload + asp.net 异步多文件上传
    写给若干年后的自己
    There is already an open DataReader associated with this Connection which must be closed first EF
    我,一个传统男人的22岁
    错误 137 (net::ERR_NAME_RESOLUTION_FAILED):未知错误
    Android APK反编译详解(附图)
    string的连接字符串方法及效率
    腾讯QQ API接口调用 之QQ状态查询
  • 原文地址:https://www.cnblogs.com/aigeileshei/p/5969699.html
Copyright © 2011-2022 走看看