时间戳

首页 > 解决方案 > Image not uploading without submit button

javascript - Image not uploading without submit button

问题描述

I am trying to upload mp3 file to server without using submit button i am using ajax but file not uploading to server.Where i am wrong here is my code 

<script>
$(document).ready(function() {
    $('#fileToUpload').change(function(){
        var file_data = $('#fileToUpload').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $.ajax({
            url: "modules/phone/newvoicemail.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                console.log(data);
            }
        });
    });
});
</script>

In newvoicemail.php i put following code

$src = $_FILES['file']['tmp_name'];
    $file_name = $_FILES['fileToUpload']['name'];
    $file_size =$_FILES['fileToUpload']['size'];
    $file_tmp =$_FILES['fileToUpload']['tmp_name'];
    $file_type=$_FILES['fileToUpload']['type'];
    move_uploaded_file($file_tmp,"voicemail/".$file_name);

here is my html code

<form name="voicemailform" action="modules/phone/voicemail.php" method="POST" enctype="multipart/form-data" class="form-inline for-frm">
<input type="file" name="fileToUpload" id="fileToUpload">
</form>

标签： javascriptphpjqueryajax

解决方案

  1. 由于您使用 ajax 上传， 因此您的 HTML标记上不需要name、和属性。同样适用于文件输入标签的属性。actionmethodenctypeformname

  2. 您需要将enctype: 'multipart/form-data',添加到$.ajax({...});

  3. 由于您在 JS 中将 带有参数名称文件的表单数据附加为form_data.append('file', file_data); ，您应该在 php 中以$_FILES['file'] 的形式访问它，而不是$_FILES['fileToUpload']

HTML 代码：

<form class="form-inline for-frm">
    <input type="file" id="fileToUpload">
</form>

JS代码：

       $('#fileToUpload').change(function () {
            var file_data = $('#fileToUpload').prop('files')[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            $.ajax({
                url: "modules/phone/newvoicemail.php",
                type: "POST",
                data: form_data,
                contentType: false,
                cache: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (data) {
                    console.log(data);
                }
            });
        });

PHP 代码：newvoicemail.php

<?php
    $src = $_FILES['file']['tmp_name'];
    $file_name = $_FILES['file']['name'];
    move_uploaded_file($src, "./voicemail/".$file_name);

推荐阅读