JS - 使用Ajax获取文件名

时间:2016-05-15 20:40:15

标签: javascript php jquery ajax

我正在尝试使用Ajax获取文件的扩展名和名称。

我的ajax代码如下:

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

在PHP中我有这个

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

我的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="button" value="SAVE"></li>
</form>

但似乎行不通。我做错了什么?

1 个答案:

答案 0 :(得分:1)

你必须使用FormData()使这成为可能,序列化或serializeArray()不支持文件api使用以下解决方案:

工作解决方案的主要更新

我确实从按钮更新了Save按钮的类型,请使用下面的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>

并使用以下jquery代码使其正常工作

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);
                    }
                });
        });

也使用下面的php代码进行扩展:

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

我的测试index.php代码

<强> http://pastebin.com/L81xUbxL

Url更改为目标网址。

旧的不工作

 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);
        }
    });

获取扩展程序可以执行此操作

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