上传文件的jQuery [英] upload file with jquery

问题描述

我要上传与阿贾克斯的文件

这是我的code PHP，HTML：

 ＆LT;形式的行动=uploadVideo.php方法=POSTENCTYPE =的multipart / form-data的＆GT;
    ＆LT;输入类型=文件名称=choosefilebtnID =choosefilebtn大小=50/＆GT;
    ＆LT;输入类型=按钮级=uploadbutton值=上传NAME =uploadbtnID =uploadbtn/＆GT;
＆LT; /形式GT;
 

jQuery的：

  $（函数（）{
    $（'＃uploadbtn）。点击（函数（）{
        变种文件名= $（'＃choosefilebtn）VAL（）。
        警报（文件名）;
        $阿贾克斯（{
            键入：POST，
            网址：uploadVideo.php
            ENCTYPE：多部分/表单数据，
            数据： {
                文件：文件名
            }，
            成功：函数（）{
                警报（数据上传）;
            }
        }）;
    }）;
}）;
 

当我使用类型sumbmit上传按钮（不阿贾克斯）它的工作原理，但与阿贾克斯它不工作，任何机构可以帮助我， 谢谢

---

编辑： 新增uploadVideo.php code

  $发布 - ＆GT;远程主机= $英尺premotehost;
$发布 - ＆GT;用户名= $ ftpusername;
$发布 - ＆GT;密码= $ ftppassword;
$发布 - ＆GT; remotedir = CONSTANT_SERVERROOT $夹folderName;
$发布 - ＆GT;文件名= $ _ FILES ['choosefilebtn'] ['名称'];
$发布 - ＆GT; FTPLogin（）;
$发布 - ＆GT; filecontent = FREAD（FOPEN（$ _ FILES ['choosefilebtn'] ['tmp_name的值']，RB），
                                     $ _FILES ['choosefilebtn'] ['大小']）;
$发布 - ＆GT; MAKEDIR（$发布 - ＆GT; remotedir）;
$结果= $发布 - ＆GT;发布（）;
 

解决方案

您会发现与您要发送的文件名Ajax调用，而该文件不是内容：

  $。阿贾克斯（{
        // ...
        数据： {
            文件：文件名//只是一个名字，没有文件内容！
        }，
        // ...
    }）;
 

这是我知道是用通过AJAX发送文件数据的唯一方法隐藏 IFRAME 并提交表单到

即。有

 ＆LT; IFRAME风格=显示：无ID =formtarget/＆GT;
＆LT;形式的行动=uploadVideo.php方法=POSTENCTYPE =的multipart / form-data的
    目标=formtarget＆GT;
    ＆LT;输入类型=文件名称=choosefilebtnID =choosefilebtn大小=50/＆GT;
    ＆LT;输入类型=按钮级=uploadbutton值=上传NAME =uploadbtnID =uploadbtn/＆GT;
＆LT; /形式GT;
 

I want to upload a file with ajax

here is my code php, html:

<form action="uploadVideo.php" method="POST" enctype="multipart/form-data">  
    <input type="file" name="choosefilebtn" id="choosefilebtn"  size="50" /> 
    <input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />     
</form>

jquery:

$(function() {
    $('#uploadbtn').click(function() {
        var filename = $('#choosefilebtn').val();
        alert(filename);
        $.ajax({
            type: "POST",
            url: "uploadVideo.php",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function() {
                alert("Data Uploaded: ");
            }
        });
    });
});

when I use type sumbmit for upload button ( without ajax) it works, but with ajax it doesnt work, can any body help me, Thanks

---

Edit: Added uploadVideo.php code

$publish->remotehost=$ftpremotehost;
$publish->username=$ftpusername;
$publish->password=$ftppassword;
$publish->remotedir=CONSTANT_SERVERROOT.$folderName;
$publish->filename=$_FILES['choosefilebtn']['name'];
$publish->FTPLogin();
$publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"), 
                                     $_FILES['choosefilebtn']['size']);
$publish->makedir($publish->remotedir);
$result=$publish->Publish();

解决方案

You'll notice with the ajax call you are sending the filename, and not the contents of that file:

    $.ajax({
        //...
        data: {
            file: filename //just a name, no file contents!
        },
        //...
    });

the only way that I am aware of sending file data via ajax is using a hidden iframe and submitting a form to that

i.e. have

<iframe style="display: none" id="formtarget" />
<form action="uploadVideo.php" method="POST"  enctype="multipart/form-data"
    target="formtarget">  
    <input type="file" name="choosefilebtn" id="choosefilebtn"  size="50" /> 
    <input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />     
</form>

这篇关于上传文件的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！