Question

我正在尝试从image到php＆amp;的modal形式的html页面上传<form method="post" enctype="multipart/form-data"> <div class="row"> <div class="col-sm-4"> <label class="Modallabel">Photo:</label> </div> <div class="col-sm-8"> <div class="input-group input-group-sm" style="margin-top: -5px;"> <input type="file" id="fileUpload" name="fileUpload" style="color: #ffffff;"/> </div><br> </div> </div> </form> <button type="button" class="btn btn-success btn-md" style="margin:0;width: 75px;" onclick="AddNewCustomer()">Add</button>到数据库。 ajax，但它不起作用我不知道为什么，任何人都可以帮助我吗？

HTML页面

function AddNewCustomer()
{
//Image upload
$(document).ready(function() 
{
    $(document).on('change', '#fileUpload', function() //NOT WORKING HERE
    {
        var property = document.getElementById("fileUpload").files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();
        if (jQuery.inArray(image_extension, ['gif','png','jpg','jpeg']) == -1)
        {
            alert("invalid Image File");
        }
        var image_size = property.size;
        if(image_size > 2000000)
        {
            alert("Image File Size is very big");
        }
        else
        {
            var form_data = new FormData();
            form_data.append("fileUpload", property);

            $.ajax
            ({
                type:"POST",
                url:"addNewCustomer.php",
                processData: false,
                cache: false,
                contentType: false,
                data:
                    {
                    'form_data':form_data
                    },
                success: function(data){
                    if (data == "Success!")
                    {
                        sweetAlert("Data entered successfully!");
                    }
                    else if(data == "Exist") 
                    {
                        sweetAlert("","Customer already exists!","error");
                        return false;
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('ERROR', textStatus, errorThrown);
                }
            })
        }
    })
})

}

Javascript功能

{{1}}

Answer 1

点击

<ion-list>
  <ion-list-header *ngFor="let type of appointment_types">{{ type }}</ion-list-header>

  <!-- type is no longer defined after ion-list-header closes -->
  <ion-item-sliding class="shaded-slider" *ngFor="let client of appointment_types[type]"> 
    <ion-item>{{ client.name }}</ion-item>
  </ion-item-sliding>
</ion-list>

appointment_types后，会附加

change个事件。

您可以移除<button>功能，并点击onclick="AddNewCustomer()元素在AddNewCustomer元素上调用change。

#fileUpload

Answer 2

您希望在选择图像后立即上传图像，但只在单击“添加”按钮时才运行该功能。

您需要从函数中取出change代码，或在加载页面时调用该函数以将监听器添加到表单中。

在php＆amp ;;中将图像上传到数据库阿贾克斯

2 个答案: