weixin_33688840 2016-05-15 20:40 采纳率: 0%
浏览 611

JS-使用Ajax获取文件名

I am trying to get the extension and name of a file using Ajax.

My ajax code looks like:

$.ajax({
    type: "POST",
    url: url,
    data: $("#updateMember").serialize(), 
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: function (data) {
        alert(data);
    }
});

In PHP I have this

$imageFileType = pathinfo($_FILES["input9"]["name"], PATHINFO_EXTENSION);
echo $imageFileType;

and my html is

<form method="post" enctype="multipart/form-data" id="updateMember">
    <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;">
    <li class="menu__item"><input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="button" value="SAVE"></li>
</form>

but it seems to not work. What am I doing wrong?

  • 写回答

1条回答 默认 最新

  • bug^君 2016-05-15 20:59
    关注

    You have to use FormData() to make this possible, serialize or serializeArray() does not support file api's use the below solution :

    Main update for working solution

    I did update the Save button's type from button to submit please use the below html :

    <form method="post" enctype="multipart/form-data" id="updateMember">
        <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;">
        <li class="menu__item">
        <input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="submit" value="SAVE">
        </li>
    </form>
    

    and use the below jquery code to make it work

    jQuery('#updateMember').submit(function(e){
               e.preventDefault();
                var data = new FormData(this);
                    $.ajax({
                        type: "POST",
                        url: 'upload.php',
                        data: data, 
                        mimeType: "multipart/form-data",
                        contentType: false,
                        cache: false,
                        dataType: "html",
                        processData: false,
                        success: function(data) {
                            alert(data);
                        }
                    });
            });
    

    also use the below php code for extension :

    $data = $_FILES['input9'];
    $data_ext = explode('/',$data['type']);
    $extension = $data_ext[1];
    echo $extension;
    

    My test index.php code

    http://pastebin.com/L81xUbxL

    Change Url To your target url.

    Old non working

     var data = new FormData('#updateMember');
        $.ajax({
            type: "POST",
            url: url,
            data: data, 
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            dataType: "html",
            processData: false,
            success: function(data) {
                alert(data);
            }
        });
    

    for getting an extension you can do this

    $path_ = pathinfo($_FILES["input9"]["name"]);
    $extension = $path_['extension'];
    echo $extension;
    
    评论

报告相同问题?

悬赏问题

  • ¥100 C51单片机设计交通灯时出现的问题
  • ¥15 R语言爬虫的时候元素和园代码不一样怎么解决呀
  • ¥15 VS2022多项目启动有问题
  • ¥15 SQL删除添加数据后序号不连续问题。
  • ¥15 首次运行OmniEvent运行报错
  • ¥15 有没有人知道这个问题怎么解决
  • ¥15 comsol电力电缆载流量仿真
  • ¥15 webSocket可以接TCP socket接口吗
  • ¥60 mpi并行出错,CFD++计算
  • ¥15 c#:vsto,powerpoint的外接程序中换主题颜色