Ajax上传图片

Q.1我想将这种形式转换为ajax,但似乎我的ajax代码缺少某些内容。提交根本不做任何事情。

Q2。我还希望在选择文件时不等待提交时在更改时触发该函数。

这是JS。

$('#imageUploadForm').on('submit',(function(e) {

e.preventDefault()

$.ajax({

type:'POST',

url: $(this).attr('action'),

data:$(this).serialize(),

cache:false

});

}));

和HTMl与php。

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

<input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/>

<input type="submit" name="upload" value="Upload" />

<img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>

</form>

回答:

首先在ajax调用中包含成功和错误功能,然后检查它是否给您错误或什么?

您的代码应该像这样

$(document).ready(function (e) {

$('#imageUploadForm').on('submit',(function(e) {

e.preventDefault();

var formData = new FormData(this);

$.ajax({

type:'POST',

url: $(this).attr('action'),

data:formData,

cache:false,

contentType: false,

processData: false,

success:function(data){

console.log("success");

console.log(data);

},

error: function(data){

console.log("error");

console.log(data);

}

});

}));

$("#ImageBrowse").on("change", function() {

$("#imageUploadForm").submit();

});

});

以上是 Ajax上传图片 的全部内容, 来源链接: utcz.com/qa/399056.html

回到顶部