使用jQuery上传非拉丁名称文件

Upload non-latin name file with jQuery

本文关键字：丁名 文件 jQuery 使用      更新时间：2023-09-26

我有一个简单的表单，可以通过ajax将文件上传到服务器。

这里是输入事件监听器：

$(document).on('change', '.js-file', function(event){
    sendFile(event);
});

这里是实际上传文件的功能：

function sendFile (event) {
    var files = event.target.files;

    var action = '/ajax-upload-files/';
    var data = new FormData();
    $.each(files, function(key, value)
    {
        data.append(key, value);
    });
    $.ajax({
        url: action,
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data){
        },
        complete: function(data) {
        }
    });
}

它对所有类型的文件都很好，除了文件名中包含非拉丁字符的文件，例如Максим.jpg

数据正在被发送到服务器，正如我在Chrome网络中看到的那样。但当我尝试在服务器上转储$_FILES时，它似乎是空的。

var_dump($_FILES) //array(0) {}

我真的不明白出了什么问题——请求标头的contentLength比它应该的要小得多——看起来文件由于某种原因并没有附加到表单中。

我终于上传了非拉丁名称文件。必须以二进制形式读取并以二进制形式发送。

HTML:

<input class="js-file" name="filename" type="file">

和js

//Handler in input
$(document).on('change', '.js-file', function(event){
            var file_name = $(this).attr('name');

            var reader = new FileReader();
            var f = event.target.files[0],
                nameArr = event.target.files[0]['name'].split('.'),
                extension = nameArr[nameArr.length-1]; //here we can check if extension is allowed
            reader.onload = function(e) {
                var contents = e.target.result;
                contents = contents.split('base64,')[1]; //we need only encoded part
                sendFileAsBinary(file_name, extension, contents);
            };
            reader.readAsDataURL(f);

        });

发件人：

function sendFileAsBinary(file_name, extension, img) {
    $.ajax({
        url: '/ajax-upload-files/',
        type: 'POST',
        data: {
            name: file_name,
            img: img,
            extension: extension
        },
        dataType: 'json',
        success: function(data){

        },
        complete: function(data) {
        }
    })
}

和php代码解码图像：

 $name = $this->_getParam('name');
 $extension = $this->_getParam('extension');
 $computedName = $name . '.' . $extension;
 $fileContent = base64_decode($this->_getParam('img'));
 file_put_contents($fileContent, $computedName);

这是我正在使用的代码（您的代码）：

HTML文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.min.js"></script>
<script>
$(document).on('change', '#fileToUpload', function(event){
    sendFile(event);
});
function sendFile (event) {
    var files = event.target.files;
    var myAction = 'test.php';
    var myData = new FormData();
    $.each(files, function(key, value){
        myData.append(key, value);
    });
    $.ajax({
        url: myAction,
        type: 'POST',
        data: myData,
        cache: false,
//        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data){
                    console.log(data);
        },
        complete: function(data) {
        }
    });
}
</script>
</head>
<body>
<form action="test.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

test.php

<?php
echo var_dump($_FILES);
?>

console.log（）中的结果

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  0 <font color='#888a85'>=&gt;</font> 
    <b>array</b> <i>(size=5)</i>
      'name' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'Максим.jpg'</font> <i>(length=16)</i>
      'type' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'image/jpeg'</font> <i>(length=10)</i>
      'tmp_name' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'C:'wamp'tmp'phpE01A.tmp'</font> <i>(length=23)</i>
      'error' <font color='#888a85'>=&gt;</font> <small>int</small> <font color='#4e9a06'>0</font>
      'size' <font color='#888a85'>=&gt;</font> <small>int</small> <font color='#4e9a06'>951214</font>
</pre>

所以，正如你所看到的，我的代码上传文件，服务器可以看到它。你的机器上有不同的结果吗？

相关文章：