Question

我正在尝试在Codeigniter中创建包含文件上传的表单。以下是我的观点：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <?php echo form_open_multipart('puzzles/create'); ?>
                <div class="form-group">

                    <input type="file" id="imgupload" name="puzzle" size="20" />
                    <?php echo form_error('puzzle'); ?><br />
                </div>
                <img id="imgpreview" src="#" alt="your image" />


                <div class="form-group">
                    <label for="health">Health</label>
                    <select name="health" class="form-control">
                        <option disabled selected value> -- select a health option -- </option>
                        <option value="new" <?php echo set_select('health','new', ( !empty($health) && $health == "new" ? TRUE : FALSE )); ?>>New</option>
                        <option value="used" <?php echo set_select('health','used', ( !empty($health) && $health == "used" ? TRUE : FALSE )); ?>>Used</option>
                    </select>
                    <?php echo form_error('health'); ?><br />
                </div>

                <div class="form-group">
                    <label for="manufacturer">Manufacturer</label>
                    <select id="manufacturer" name="manufacturer" class="form-control">
                        <option disabled selected value> -- select an manufacturer -- </option>
                        <option value="manufacturer1" <?php echo set_select('manufacturer','manufacturer1', ( !empty($manufacturer) && $manufacturer == "manufacturer1" ? TRUE : FALSE )); ?> >Manufacturer1</option>
                        <option value="manufacturer2" <?php echo set_select('manufacturer','manufacturer2', ( !empty($manufacturer) && $manufacturer == "manufacturer2" ? TRUE : FALSE )); ?> >Manufacturer2</option>
                        <option value="manufacturer3" <?php echo set_select('manufacturer','manufacturer3', ( !empty($manufacturer) && $manufacturer == "manufacturer3" ? TRUE : FALSE )); ?> >Manufacturer3</option>
                        <option value="manufacturer4" <?php echo set_select('manufacturer','manufacturer4', ( !empty($manufacturer) && $manufacturer == "manufacturer4" ? TRUE : FALSE )); ?> >Manufacturer4</option>
                        <option value="other" <?php echo set_select('manufacturer','other', ( !empty($manufacturer) && $manufacturer == "other" ? TRUE : FALSE )); ?> >Other</option>
                    </select>
                    <?php echo form_error('manufacturer'); ?><br />
                </div>

                 <input type="submit" name="submit" value="Create Puzzle item" class="btn  btn-primary btn-block" />
            </form>
        </div>
    </div>
</div>

我用ajax调用动态调用控制器

$('.myProfileDropdown li a').click(function(e){
        e.preventDefault();
        var actionUrl = $(this).attr('data-url');
        $.get(actionUrl, function(response){
            $('#profileInfoModal .modal-body').html(response);
            $('#profileInfoModal').modal();
        });
    });

所以表格在BS模态中。接下来我使用这个JS来＆＃34; catch＆＃34;回复到同一模态：

$('body').on('submit', '#profileInfoModal form', function(event){
        event.preventDefault(); 
        var formData = $(this).serialize(); 
        var actionUrl = $(this).attr('action');
        console.log(formData);
        $.post(actionUrl, formData, function(response){ 
            $('#profileInfoModal .modal-body').html(response);
        });
    });

但是文件未上传。表单验证运行但文件上传已返回You did not select a file to upload.。问题是post to actionUrl仅发布健康和制造商字段。我认为这就是问题所在。

有人可以解释一下如何在JS中将我的数据添加到formData变量吗？

更新：

console.log返回health=new&manufacturer=manufacturer1

Answer 1

试试这个

$.ajax({
    url: actionUrl, 
    type: "POST",             
    data: new FormData(document.forms.form),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

Answer 2

您需要在此处使用FormData，不能以您尝试的方式上传文件。

这样的事情（未经测试，从头顶开始）：

// Get the image input
var imgUpload = document.getElementById("imgupload");
var fileToUpload = imgUpload.files[0]; // I assume [0] is present

// Create a FormData
var formData = new FormData();
formData.append("aFileName", fileToUpload, "theFilePath.jpg");

然后你将发布formData

如何在Codeigniter中序列化文件上传字段？

2 个答案: