个人中心
gpt4 book ai didi

javascript - 使用 AJAX 在按钮单击时调用 PHP 函数

转载 作者：行者123 更新时间：2023-12-03 11:19:53 25 4
gpt4 key购买 nike

我正在创建一个文件上传脚本。

我想做的是上传文件而不刷新页面

这是我的代码:

上传.php

<?php
function upload(){
if(!empty($_FILES['file1']['name'][0])){

$files = $_FILES['file1'];
$uploaded = array();
$failed = array();
$allowed = array('jpg','txt','png');

foreach ($files ['name'] as $position => $file_name) {

    $file_tmp = $files['tmp_name'][$position];
    $file_size = $files['size'][$position];
    $file_error = $files['error'][$position];

    $file_ext = explode('.', $file_name);
    $file_ext = strtolower(end($file_ext));

    if (in_array($file_ext,$allowed)) {
        if ($file_error === 0) {
            if($file_size<=20971520){
                $file_name_new = uniqid('',true).'.'.$file_ext;
                $file_destination = 'test_uploads/'.$file_name_new;

                if (move_uploaded_file($file_tmp, $file_destination)) {
                    $uploaded[$position] = $file_destination;
                }else{
                    $failed[$position] = '[{$file_name}] failed to upload!';
                }
            }else{
                $failed[$position] = '[{$file_name}] file is too large!';
            }
        }else {
        $failed[$position] = '[{$file_name}] file extension is not allowed!';
        }
    }else{
        $failed[$position] = '[{$file_name}] file extension not allowed!';
    }
}

if (!empty($uploaded)) {
    print_r($uploaded);
}

if (!empty($failed)) {
    print_r($failed);
}
}
}
?>
<html>
<head>
</head>
<body>
<h2>Multiple File Upload </h2>
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<input type="file" name="file1[]" id="file1" multiple>
<input type="button" value="Upload File" onclick ="document.write('<?php upload(); ?>'')">
</form>

</body>
</html>

我想在 AJAX 上执行此操作，我已经搜索了一些示例，但我希望它尽可能简单。

顺便问一下，是否可以在不使用任何插件或库的情况下运行它？

最佳答案

我设法找到了解决方案。我将 php 脚本与 html 分离并添加了一个 javascript 文件。我使用ajax调用PHP文件来上传文件。

这是我的代码；

index.php

<html>
<head>
<style type="text/css">

.upload{
width:500px;
background:#f0f0f0;
border: 1px solid #ddd;
padding: 20px;
}
.upload fieldset{
border: 0;
padding: 0;
margin-bottom:10px; 
}

.uploads a, .uploads span{
display: block;
}

.bar{
width: 100%;
background: #eee;
padding: 3px;
margin-bottom:10px; 
box-shadow: inset 0 1px 3px rgba(0,0,0,2);
border-radius: 3px;
box-sizing:border-box;
}
.barfill{
height: 20px;
display: block;
background: #ff6f01;
width:0px;
border-radius: 3px;
transition:width 0.8s ease;
}

.barfilltext{
color:#fff;
padding: 3px;
}
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data" id="upload" class="upload">
    <fieldset>
        <legend>Upload Files</legend>
        <input type="file" id="file" name="file[]" required multiple>
        <input type="button" id="submit" value="Upload">
    </fieldset>
    <div class="bar">
        <span class="barfill" id="pb"><span class="barfilltext" id="pt">40%</span></span>
    </div>
    <div id="uploads" class="uploads">

    </div>
    <script type="text/javascript" src="upload.js"></script>

    <script type="text/javascript">
        document.getElementById('submit').addEventListener('click', function(e){
                e.preventDefault();
            var f = document.getElementById('file'),
                pb = document.getElementById('pb'),
                pt = document.getElementById('pt');

                    app.uploader({
                    files:f,
                    progressBar:pb,
                    progressText:pt,
                    processor: 'upload.php',

                    finished: function(data){
                        var uploads = document.getElementById('uploads'),
                            succeeded = document.createElement('div'),
                            failed = document.createElement('div'), anchor, span, x;

                            if (data.failed.length) {
                                failed.innerHTML = '<p>The following files failed to upload</p>'

                            }
                            uploads.innerText = '' ;
                            for(x=0; x<data.succeeded.length; x = x+1){
                                anchor = document.createElement('a');
                                anchor.href = 'uploads/' + data.succeeded[x].file;
                                anchor.innerText = data.succeeded[x].name;
                                anchor.target = '_blank';
                                succeeded.appendChild(anchor);
                            }
                            for(x=0;x<data.failed.length; x=x+1){
                                span = document.createElement('span');
                                span.innerText = data.failed[x].name;

                                failed.appendChild(span);   
                            }
                            uploads.appendChild(succeeded);
                            uploads.appendChild(failed);
                    },


                    error: function (){
                        console.log("Error");
                    }
                });
            });
    </script>
</form>
</body>
</html>

上传.php

<?php
header('Content-Type: application/json');
$uploaded = [];
$allowed = ['jpg'];
$succeeded = [];
$failed = [];
if (!empty($_FILES['file'])) {

foreach ($_FILES['file']['name'] as $key => $name) {

    if($_FILES['file']['error'][$key] === 0){
        $temp = $_FILES['file']['tmp_name'][$key];
        $ext = explode('.', $name);
        $ext = strtolower(end($ext));

        $file = md5_file($temp) . time() .'.'.$ext;

        if (in_array($ext,$allowed) === true && move_uploaded_file($temp, "uploads/{$file}") === true) {
                $succeeded [] = array('name' => $name, 'file' => $file);

            # code...
        }else{
            $failed[] = array('name' => $name );
        }

    }else{

        echo "Error";
    }
  }
}

if (!empty($_POST['ajax'])) {
echo json_encode(array(
'succeeded' => $succeeded, 
'failed' =>$failed
));
}
?>

upload.js

var app = app || {};
(function (obj) {
"use stricts;"
//Private Methods
var ajax, getFormData, setProgress;

ajax = function(data){
    var xmlhttp = new XMLHttpRequest(), uploaded;
    xmlhttp.addEventListener('readystatechange', function(){
        if (this.readyState === 4) {
            if (this.status === 200) {
                uploaded = JSON.parse(this.response);
                if (typeof obj.options.finished === 'function') {
                    obj.options.finished(uploaded);
                }
            }else{
                if (typeof obj.options.error === 'function') {
                    obj.options.error();
                }
            }
        }
    });
    xmlhttp.upload.addEventListener('progress',function(){
        var percent;

        if (event.lengthComputable === true) {
            percent = Math.round((event.loaded / event.total) * 100);
            setProgress(percent);
        }
    });

    xmlhttp.open('post', obj.options.processor);
    xmlhttp.send(data);

};

getFormData = function(source){
    var data = new FormData(), i;

    for(i=0; i<source.length; i = i+1){
        data.append('file[]',source[i]);
    }
    data.append('ajax', true);
    return data;
};

setProgress = function (value){
    if (obj.options.progressBar !== undefined) {
        obj.options.progressBar.style.width = value ? value + '%': 0;
    }

    if (obj.options.progressText !== undefined) {
        obj.options.progressText.innerText = value ? value + '%' : 0; 
    }
};

obj.uploader = function(options){
    obj.options = options;

    if (obj.options.files !== undefined) {
        ajax(getFormData(obj.options.files.files));
    }
}
}(app));

无论如何，谢谢大家的帮助。这些都受到了很高兴的赞赏。谢谢!

关于javascript - 使用 AJAX 在按钮单击时调用 PHP 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27168501/

25 4 0
文章推荐： javascript - 如何使用javascript获取两个日期之间的差异
文章推荐： java - 比较两个对象的不同属性集
文章推荐： java - Thymeleaf (Java Spring) : Cannot get mvc. uri 工作
文章推荐： javascript - 仅当我在 Chrome 上缓存刷新时，网站才能完全运行，在其他浏览器上运行良好
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com