组合上载文件并在ajax请求中发送其他字段值

Question

我正试图获得val的#posthash输入以及上传文件。

我希望能够使用formData.append('newattachment', $('input[type=file]')[0].files[0]);

和$('#posthash').val()

如果同时使用$('#posthash').val()，则会导致表单抛出上传错误，如果两者都使用。You did not select a file to upload.

问题，我怎样才能得到我的帖子散列val，同时上传和发布？

<script type="text/javascript">
$('#newattachment').on('click', function(e){
    var formData = new FormData();
    formData.append('newattachment', $('input[type=file]')[0].files[0]);
    $.ajax({
        type: 'post',
        url: "<?php echo base_url('newthread/attachments');?>",
        data: {
            formData,
            posthash: $('#posthash').val()
        },
        cache: false,
        contentType: false,
        processData: false, 
        success: function(response){
            if (response.processed) {

            } else {

                $('#errors').append('<div class="upload_errors"></div>');
                $(".upload_errors").html(response.upload_errors);

            }
        }
    });

    e.preventDefault();
});
</script>

HTML

<?php echo form_open_multipart($action, array('id' => 'form-post'));?>

<div class="container">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="errors">
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="upload_data">
</div>
</div>

<div class="row">

<div class="col-lg-3 col-md-3 col-sm-12">
<div class="well">

</div>
</div>

<div class="col-lg-9 col-md-9 col-sm-12">

<input type="hidden" name="posthash" id="posthash" value="<?php echo $posthash;?>">

<div class="panel panel-default">

<div class="panel-heading">

</div>

<div class="panel-body">

<div id="message" contenteditable="true" style="width: 100%; height: 344px; overflow: auto;"></div>

</div>

<div class="panel-footer">
<div class="row">
<div class="col-lg-6">
<div class="clearfix" style="padding-top: 6px;">
<div class="pull-left">
<label>New Attachment:</label> 
</div>
<div class="pull-right">
<input name="attachment" id="attachment" size="30" class="fileupload" type="file">
</div>
</div>
</div>
<div class="col-lg-6 text-right">
<input class="btn btn-default" name="newattachment" id="newattachment" value="Add Attachment" type="button" />
</div>
</div>
</div>

</div>

<br/>

<?php if ($attachments) {?>
    <?php foreach ($attachments as $attachment) {?>
        <ul>
        <li>
            <img src="<?php echo base_url('uploads/' . $attachment['attachname']);?>" width="150" height="150">
        </li>
        </ul>
    <?php }?>
<?php }?>

</div>

</div>

</div>

<?php echo form_close();?>

<script type="text/javascript">
$('#newattachment').on('click', function(e){
    var formData = new FormData();
    formData.append('newattachment', $('input[type=file]')[0].files[0]);
    $.ajax({
        type: 'post',
        url: "<?php echo base_url('newthread/attachments');?>",
        data: {
            formData,
            posthash: $('#posthash').val()
        },
        cache: false,
        contentType: false,
        processData: false, 
        success: function(response){
            if (response.processed) {

            } else {

                $('#errors').append('<div class="upload_errors"></div>');
                $(".upload_errors").html(response.upload_errors);

            }
        }
    });

    e.preventDefault();
});
</script>

Answer 1

如果使用FormData()作为发送到服务器的数据(在ajax请求中)，则必须使用只使用这个对象来发送数据：

var formData = new FormData();
formData.append('newattachment', $('input[type=file]')[0].files[0]);
formData.append('posthash', $('#posthash').val());

在您的$.ajax呼叫中：

$.ajax({
    type: 'post',
    url: "",
    data: formData,
    ...
});