使用序列化上传图像(Jquery - PHP)

时间:2017-02-21 17:49:53

标签: javascript php jquery image-uploading

我有这个代码用于上传图片和序列化表单中的数据,但我在apache2日志中收到错误:

file_get_contents():文件名不能为空

这是表单上传文件的代码:

        <div class="input-group">
    <input type="file" id="prd_foto" name="prd_foto" multiple>Immagini</div>
 </div>
    </fieldset>
 <div class="form-group">
    <button class="btn btn-primary" id="btnUpload" type="button" value="submit">Inserisci</button>
</div>
    </form>
</div>

在PHP文件中我有这段代码

$imgData =addslashes(file_get_contents($_FILES['prd_foto']['tmp_name']));
$imageProperties = getimageSize($_FILES['prd_foto']['tmp_name']);

Javascript代码:

    $(document).ready(function () //Setting up on Document to Ready Function
{
    $("#btnUpload").click(function (event) {

        //getting form into Jquery Wrapper Instance to enable JQuery Functions on form                    
        var form = $("#reg-form");

        //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
        var params = form.serializeArray();

        //Getting Files Collection
        var files = $("#prd_foto")[0].files;
        console.log(files);
        //Declaring new Form Data Instance  
        var formData = new FormData();
        console.log(formData);
        //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.  
        for (var i = 0; i < files.length; i++) {
            formData.append(files[i].name, files[i]);
        }
        //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. 
        $(params).each(function (index, element) {
            formData.append(element.name, element.value);
        });

        //disabling Submit Button so that user cannot press Submit Multiple times
        var btn = $(this);
        btn.val("Uploading...");
        btn.prop("disabled", true);

        $.ajax({
            url: "submit_prd.php", //You can replace this with MVC/WebAPI/PHP/Java etc
            method: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function () {
                //Firing event if File Upload is completed!  
                alert("Upload Completed");
                btn.prop("disabled", false);
                btn.val("Submit");
                $("#prd_foto").val("");

            },
            error: function (error) { alert("Error"); }

        });

    });

});

有什么不对? 对不起,我的英语不好 ! ; d

0 个答案:

没有答案