Ajax请求上传图像并保存在服务器中

时间:2017-08-25 14:49:23

标签: javascript jquery html ajax firebase

我正在尝试将图像保存在服务器位置以下是我的HTML代码:

HTML code:

<form>
 <input type="file" accept="image/*"/>
</form>

的Javascript

        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();
        if (file) {
            reader.readAsDataURL(file);
        }
        reader.addEventListener("load", function () {
            $.ajax({
                type: 'POST',
                url: 'http://localhost/MyProject/src/images',
                data: {filename: file.filename, data: file.data},
                succes: function(response){
                    alert(response.responseText);
                },
                error: function(error) {
                    alert(error.responseText);
                }
            });
        }, false);

正在调用ajax的成功方法但是在调试时我发现file.data是未定义的。应该使用什么变量而不是file.data?我需要将上传的图像保存在我的服务器中

修改

我按照上面提到的重复问题回答了这里的新代码

HTML:

<form id='uploadForm' enctype="multipart/form-data">
    <input name="file" type="file" id="fileName" />                 
    <button ng-click="signIn()">Upload</button>
</form>

使用Javascript:

var fileInput = document.getElementById('fileName');
        var file = fileInput.files[0];
        var form = document.getElementById('uploadForm');
        var formdata = new FormData(form);
        formdata.append('file', file)
            //Save image in serverBase
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost/MyProject/src/images',
                    // Form data
                    data: formdata,
                    // Tell jQuery not to process data or worry about content-type
                    // You *must* include these options!
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        alert(response);
                    },
                    error: function(error) {
                        alert(error.responseText);
                    }
                });         

使用上面的代码,我的图片没有保存在上面提到的http://localhost/MyProject/src/images&#39;目录,虽然ajax调用成功但我收到的警报是一些HTML代码。不确定发生了什么。有什么想法吗?

修改

浏览一些像How to store uploaded file into server path using either javascript or jquery

这样的问题

似乎javascript是客户端脚本语言不足以在服务器路径上存储图像。我正在使用firebase与数据库进行通信。我是否还必须包含一些其他语言才能在我的服务器上保存数据?firebase是否有条款帮助我这样做?

0 个答案:

没有答案