在前端開發中,我們經常需要上傳多張圖片。而使用jQuery就可以很方便地實現這個功能。
$(document).ready(function() {
$('#uploadBtn').click(function() {
$('#uploadForm').ajaxSubmit({
type: 'post',
url: 'upload.php',
success: function(data) {
alert('上傳成功!');
$('#uploadedImgs').append('<img src="' + data + '" />');
},
error: function(xhr) {
alert(xhr.responseText);
}
});
});
});
上面的代碼中,我們首先綁定上傳按鈕的點擊事件,然后使用ajaxSubmit方法提交表單,指定url和請求類型。如果上傳成功,我們就彈出上傳成功的提示框,并將上傳的圖片顯示在頁面上。
這里需要注意的是,我們使用了一個插件ajaxSubmit來方便地提交表單。在使用之前,需要引入jQuery和jquery.form.js文件。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
在頁面中,我們需要一個表單來上傳圖片,并為表單指定id。
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
</form>
最后,我們需要在頁面中指定一個區域來顯示上傳成功的圖片。
<div id="uploadedImgs"></div>
使用上面的代碼,我們就可以很輕松地實現多圖上傳的功能了。
下一篇css彈出子彈窗覆蓋