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>
  • 相关阅读:
    Mac10.12下Python3.4调用oracle
    java或Jmeter实现两个日期相加减(2003-06-01-2003-05-01)
    Jmeter使用JDBC请求简介
    草火论
    学习五有
    中国特色的信息技术实践中的两种思路:信息索引化和信息持久化
    软件工程基本原理
    东亚文化原理
    临死之前我要写一本《中国哲学史——以自然主义和人道主义的矛盾为视角》
    总体软件观五个规律
  • 原文地址:https://www.cnblogs.com/hanpengyu/p/4110615.html
Copyright © 2011-2022 走看看