Javascript JQuery文件上传，它去哪里了？_Javascript_Php_Jquery_Ajax_File Upload

Javascript JQuery文件上传，它去哪里了？

javascript php jquery ajax file-upload

Javascript JQuery文件上传，它去哪里了？,javascript,php,jquery,ajax,file-upload,Javascript,Php,Jquery,Ajax,File Upload,我一直在使用JQuery文件上传插件。一切看起来都很好，当我选择一个文件上传浏览器时，没有错误，但文件似乎没有上传。我可能错了，但我假设该文件位于项目目录（eclipse）的uploads文件夹中。代码如下： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Mini Ajax File Upload

我一直在使用JQuery文件上传插件。一切看起来都很好，当我选择一个文件上传浏览器时，没有错误，但文件似乎没有上传。我可能错了，但我假设该文件位于项目目录（eclipse）的

uploads

文件夹中。代码如下：

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Mini Ajax File Upload Form</title>

        <!-- Google web fonts -->
        <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

        <!-- The main CSS file -->
        <link href="assets/css/style.css" rel="stylesheet" />
    </head>

    <body>

        <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple />
            </div>

            <ul>
                <!-- The file uploads will be shown here -->
            </ul>

        </form>

        <!-- JavaScript Includes -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="assets/js/jquery.knob.js"></script>

        <!-- jQuery File Upload Dependencies -->
        <script src="assets/js/jquery.ui.widget.js"></script>
        <script src="assets/js/jquery.iframe-transport.js"></script>
        <script src="assets/js/jquery.fileupload.js"></script>

        <!-- Our main JS file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>


迷你Ajax文件上传表单
到这里来
浏览

script.js

$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

$（函数（）{
var ul=$（“#上传ul”）；
$（'#拖放a'）。单击（函数（）{
//模拟单击“文件输入”按钮
//显示“文件浏览器”对话框的步骤
$（this）.parent（）.find（'input'）。单击（）；
});
//初始化jQuery文件上传插件
$（'#upload'）.fileupload({
//此元素将接受文件拖放上载
dropZone:$（“#drop”），
//将文件添加到队列时调用此函数；
//通过浏览按钮或通过拖放：
添加：功能（e、数据）{
var tpl=$（''）；
//附加文件名和文件大小
tpl.find（'p'）.text（data.files[0].name）
.append（“”+formatFileSize（data.files[0].size）+“”）；
//将HTML添加到UL元素
data.context=tpl.appendTo（ul）；
//初始化旋钮插件
tpl.find（'input'）.knob（）；
//收听“取消”图标上的单击
tpl.find（'span'）。单击（函数（）{
if（tpl.hasClass（“工作”））{
jqXHR.abort（）；
}
tpl.fadeOut（函数（）{
tpl.remove（）；
});
});
//将文件添加到队列后自动上载该文件
var jqXHR=data.submit（）；
},
进度：功能（e、数据）{
//计算上载的完成百分比
var progress=parseInt（data.loaded/data.total*100,10）；
//更新隐藏的输入字段并触发更改
//让jQuery旋钮插件知道如何更新拨号盘
data.context.find（'input'）.val（progress.change（）；
如果（进度==100）{
data.context.removeClass（'working'）；
}
},
失败：功能（e，数据）{
//出了点问题！
data.context.addClass（'error'）；
}
});
//防止在窗口上删除文件时执行默认操作
$（文档）.on（'drop dragover'，函数（e）{
e、 预防默认值（）；
});
//用于格式化文件大小的辅助函数
函数formatFileSize（字节）{
如果（字节类型！=='number'）{
返回“”；
}
如果（字节数>=100000000）{
返回（字节/100000000）.toFixed（2）+“GB”；
}
如果（字节>=1000000）{
返回（字节/1000000）.toFixed（2）+'MB'；
}
返回（字节/1000）.toFixed（2）+'KB'；
}
});

upload.php

<?php

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
        echo '{"status":"success"}';
        exit;
    }
}

echo '{"status":"error"}';
exit;

您没有在服务器上运行PHP，因此上载不会保存在任何位置
您需要在服务器上安装PHP，移动到安装了PHP的服务器，或者更改为另一种语言
看起来你正在使用Windows。您可以尝试使用。
您没有在服务器上运行PHP，因此上载不会保存在任何位置
您需要在服务器上安装PHP，移动到安装了PHP的服务器，或者更改为另一种语言
看起来你正在使用Windows。您可以尝试使用。
如何判断服务器未安装PHP？因为PHP源代码已发送到firefox/firebug。如果安装了PHP，则会执行PHP脚本。现在，web服务器认为它是纯文本，并将其按原样发送到浏览器。您如何判断服务器没有安装PHP？因为PHP源代码被发送到firefox/firebug。如果安装了PHP，则会执行PHP脚本。现在，web服务器只是认为它是纯文本，并按原样将其发送到浏览器。