Question

我有一个没有表格的浏览输入字段。

<div class="bottom_wrapper clearfix">
    <div class="message_input_wrapper">
    <!--<input placeholder="Type your message here..." class="message_input"><a href="#"><img src="/public/img/camera.png" alt="camera" /></a>!-->
        <input type="hidden" name="contactid" id="contactID" value="">
        <input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
        <input type="hidden" id="image" value="<%= userid %>">
        <div class="image-upload">
            <label for="file-input">
                <img src="/public/img/camera.png"/>
            </label>
            <input id="file-input" name="file" type="file"/>
        </div>
    </div>
    <div class="send_message">
        <div class="icon"></div>
        <input type="submit" name="submit" id="submit" value="Send" onclick="submitFunction(document.getElementById('contactID').value)">
    </div>
</div>

当我点击相机图像时，浏览选项将执行。

这是我的功能，我用于简单的文字发布，但我想要修改它以发送文件。

<script type="text/javascript">
    function submitFunction(contactid) {
        var image = document.getElementById('image').value;
        var msg = document.getElementById('msg').value;
        var contactid = document.getElementById('contactID').value;
        var data = {};
        data.message = msg;

        $.ajax({
            method: "POST",
            url: "/messages/" + contactid,
            data: {message: msg}
        })
        .done(function (msg1) {
            $("#msg").val("");
            $(".chat_window  ul").append('<li class="message right appeared"><div class="avatar"><img src="http://example.com/getUserImage/' + image + '/60"/></div><div class="text_wrapper"><div class="text">' + msg + '</div></div></li>');
        });
    }
</script>

Answer 1

要使用$ .ajax方法上传图像，您需要创建FormData对象。

例如。 var formData = new FormData();

然后将您的图像和其他数据添加到formData对象

formData.append("image",$('input[type=file]')[0].files[0]);

然后将此formData作为参数或数据传递给jquery ajax方法。

$.ajax({
        method: "POST",
        url: "/messages/" + contactid,
        data: formData,
       // THIS MUST BE DONE FOR FILE UPLOADING
       contentType: false,
       processData: false
    })

Answer 2

您需要搜索要发送的数据，因此您可以使用jQuerys $（＆＃39; form＆＃39;）。serialize（）或使用FormData（），这里是API docs

所以一个简单的例子是这样的：

<form class="bottom_wrapper clearfix" form id="chatForm" enctype="multipart/form-data" action="/postMessage">
    <div class="message_input_wrapper">
        <input type="hidden" name="contactid" id="contactID" value="">
        <input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
        <input type="hidden" id="image" value="<%= userid %>">
        <div class="image-upload">
            <label for="file-input">
                <img src="/public/img/camera.png"/>
            </label>
            <input id="file-input" name="file" type="file"/>
        </div>
    </div>
    <div class="send_message">
        <div class="icon"></div>
        <input type="submit" name="submit" id="submit" value="Send">
    </div>
</div>

因此，您的输入字段应包装在一个表单中，以将所有表单输入序列化为数据，然后将所有消息一起发布。

$('#chatForm').submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success: function(data) {
          // Success handling code
        },
        error: function(data) {
          // Error handling code
        }
    });
});

然后由服务器来处理包含所有部分的消息

Answer 3

我只想让@Sachin K的回答更容易理解。确实，您必须使formData Object发布/上传文件或图像。

首先，创建formData。

var formData = new FormData();

如果在表单中（您的表单ID为'myForm'）

var formData = new FormData($('#myForm')[0]);

第二，将输入文件添加到formData。

formData.append("image",$('#file')[0]);

*'file'是您的输入文件ID。

如果您的输入文件采用表单（myForm），则可以跳过此步骤。

最后一个后期过程。

$.ajax({
    url: "input_data.php",
    type: "POST",
    data : formData,
    contentType: false,
    cache: false,
    processData:false,
    success:function(res){
        alert('image post succesfully!');
    }
});

Answer 4

我发现它在某个地方并且工作正常。可能对你有帮助。

<script type="text/javascript">`$('#submit').on('click', function() {
var file_data = $('#file-input').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
alert(form_data);                             
$.ajax({
            url: 'upload.php', // point to server-side PHP script 
            dataType: 'text',  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
                alert(php_script_response); // display response from the PHP script, if any
            }
 });

}）; `

并上传.php

<?php

if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}

＆GT;

如何使用jquery

4 个答案: