zoukankan      html  css  js  c++  java
  • 通过ajax formdata 上传附件

    1、主要使用ajax formdata 

    2、如果要做图片上传之前预览还需要blob的数据方式,window.URL.createObjectURL(blob);

    下面是js代码,服务器端就可以直接使用php的超全局数据变量,$_FILES来i进行数据的处理。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="utf-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1">
     7     <meta name="description" content="">
     8     <meta name="author" content="">
     9     <title>uploadify</title>
    10     <script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
    11     <script type="text/javascript">
    12         $(function() {
    13             $('#btn').on({
    14                 click:function() {    
    15                      var ff = new FormData();
    16                      ff.append('file', $('#upload')[0].files[0])
    17                      $.ajax({
    18                         type:'POST',
    19                         url:'test.php',
    20                         data:ff,
    21                         dataType:'json',
    22                         //processData (默认: true) 默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
    23                         processData:false, 
    24                         contentType:false, // 必须false才会自动加上正确的Content-Type 
    25                         success:function(msg) {
    26                             console.log(msg);
    27                         }
    28                      })
    29                 }
    30             })
    31 
    32             $('#upload').on({
    33                 change:function() {
    34                     var data = $(this).get(0).files[0];
    35                     var src = window.URL.createObjectURL(data);
    36                     $('#prew').attr('src', src);
    37                 }
    38             })
    39 
    40         })
    41     </script>
    42 </head>
    43 <body>
    44     <input type="file" id="upload" >
    45     <button id="btn">上传图片</button>  
    46     <br>
    47     <img src="" id="prew" style="500px;height:400px">
    48 </body>
  • 相关阅读:
    软件测试人员的年终绩效考核怎么应对
    收藏
    顶踩组件 前后两版
    订阅组件
    hdu 1963 Investment 完全背包
    hdu 4939 Stupid Tower Defense 动态规划
    hdu 4405 Aeroplane chess 动态规划
    cf 414B Mashmokh and ACM 动态规划
    BUPT 202 Chocolate Machine 动态规划
    hdu 3853 LOOPS 动态规划
  • 原文地址:https://www.cnblogs.com/hanpengyu/p/4110615.html
Copyright © 2011-2022 走看看