zoukankan      html  css  js  c++  java
  • 异步上传文件

     这里我写的有点重复了 不太简洁 整体可以再优化

    formData 是DOM对象 不是jquery对象

    var formData = new FormData($("#file")[0]); 对象.append() 可以追加表单内所有信息上传服务器

    Jquery的对象是 不能处理file

    serialize() 序列化表单,用于 Ajax 请求,直接获取表单内数据传送服务器 ,$("form").serialize()

     1 $("#file").change(function(e){                      
     2     var animateimg = $(this).val();                 //获取上传的图片名 带//
     3     var imgarr=animateimg.split('\');                 //分割以逗号                     结果  (C:fakepath6.jpg)
     4     var myimg=imgarr[imgarr.length-1];                 //去掉 // 获取图片名                 6.jpg        
     5     var houzui = myimg.lastIndexOf('.');             //获取 . 出现的位置                  1
     6 
     7
     8     var lastName = myimg.substring(houzui).toUpperCase();                         // 也可以    (.JPG) 随便 不转也行,不转 下面也要用小写
     9                               
    10     var file = $('#file').get(0).files[0];                 //获取上传的文件
    11     var fileSize = file.size;                           //获取上传的文件大小
    12     var maxSize = 1048576;                              //最大1MB
    13 
    14     if(lastName !='.PNG'&& lastName !='.JPG' && lastName !='.JPEG'){
    15         parent.layer.msg('文件类型错误,请上传图片类型');
    16         return false;
    17     }else if(parseInt(fileSize) >= parseInt(maxSize)){
    18         parent.layer.msg('上传的文件不能超过1MB');               // 需要layer的js
    19         // layer.msg('<p style="color:black">文件上传仅支持 "jpg"和"png"格式</p>', {icon: 5,time: 2000}); 提示框+背景+表情
    20         return false;
    21     }else{
    22         var fileObj = $('#file').get(0).files[0];        23         var formData = new FormData();
    24         // 存入文件对象
    25         formData.append('file',fileObj);     
    26         formData.append('name',$("#name").val());            // 也可以用jquery 获取其他值 追加到后面 一起传过去.  
    27         console.log(fileObj);
    28 
    29         $.ajax({
    30             url: "__URL__/setImg",
    31             type: 'POST',
    32             data: formData,
    33             dataType: 'json',
    34             async: false,
    35             cache: false,
    36             contentType: false,
    37             processData: false,
    38             success: function (response) {
    39                 if (response.status == 1) {
    40                      alert(response.msg);
    41                     window.location.href="<?php echo U('index');?>";
    42                 }else if(response.status == 2){
    43                     alert(response.msg);
    44                 }else {
    45                     alert(response.msg);
    46                 }
    47             },
    48         })
    49     }
    50 });        

    php   

    setImg方法返回格式:

     echo json_encode(array('status'=>1,'msg'=>"上传成功",'pic'=>$newName)); 

    作者地址:https://www.cnblogs.com/G921123/
    创作也有乐趣 知识分享 转载注明出处 相互理解 谢谢! WeChat:17321295203
  • 相关阅读:
    CSS学习笔记-盒子阴影及文字阴影
    CSS学习笔记-2D转换模块
    CSS学习笔记-过度模块-编写过渡效果
    CSS学习笔记-过渡模块
    Unity3D_Transform_位置、角度、缩放及其他
    微信小程序实现生成画报并且实现下载功能
    前端知识点
    vue导出excel表格用到的两个文件
    react 的高阶组件
    代理的配置
  • 原文地址:https://www.cnblogs.com/G921123/p/10167727.html
Copyright © 2011-2022 走看看