我的問題是可以使用ajax（jquery）將圖像上傳到服務(wù)器嗎以下是我的ajax腳本，無需重新加載頁面即可發(fā)送文本$(function() {//this submits a form$('#post_submit').click(function(event) {event.preventDefault();var great_id = $("#post_container_supreme:first").attr("class");var poster = $("#poster").val() ; $.ajax({ type: "POST", url: "my php file", data: 'poster='+ poster + '&great_id=' + great_id, beforeSend: function() { $("#loader_ic").show(); $('#loader_ic').fadeIn(400).html('<img src="data_cardz_loader.gif" />').fadeIn("slow"); }, success: function(data) { $("#loader_ic").hide(); $("#new_post").prepend(data); $("#poster").val(''); } })})})是否可以修改它以發(fā)送圖像？
3 回答
牧羊人nacy
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個贊
這可行。
$("form[name='uploader']").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
url: "page.php",
type: "POST",
data: formData,
success: function (msg) {
alert(msg)
},
cache: false,
contentType: false,
processData: false
});
e.preventDefault();
});
是您要找的東西嗎？
慕哥9229398
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個贊
這是將一次將多張圖片上傳到特定文件夾的代碼！
HTML：
<form method="post" enctype="multipart/form-data" id="image_upload_form" action="submit_image.php">
<input type="file" name="images" id="images" multiple accept="image/x-png, image/gif, image/jpeg, image/jpg" />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>
PHP：
<?php
$errors = $_FILES["images"]["error"];
foreach ($errors as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
//$ext = pathinfo($name, PATHINFO_EXTENSION);
$name = explode("_", $name);
$imagename='';
foreach($name as $letter){
$imagename .= $letter;
}
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" . $imagename);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
最后，JavaSCript / Ajax：
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "submit_image.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
希望這可以幫助
明月笑刀無情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個贊
的HTML
<form class="form-horizontal" id="myform" enctype="multipart/form-data">
<input type="text" name="name" class="form-control">
<input type="text" name="email" class="form-control">
<input type="file" name="image" class="form-control">
<input type="file" name="anotherFile" class="form-control">
jQuery代碼
$(document).on('click','#btnSendData',function (event) {
event.preventDefault();
var form = $('#myform')[0];
var formData = new FormData(form);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')
}
});
$.ajax({
url: "{{route('sendFormWithImage')}}",
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
console.log(data);
},
error: function () {
}
});
});
- 3 回答
- 0 關(guān)注
- 571 瀏覽
添加回答
舉報
0/150
提交
取消