jQuery Bootstrap圖片上傳是一種方便快捷的圖片上傳方式,它結合了jQuery和Bootstrap的優勢,可以讓我們更加簡單地實現圖片上傳的功能。下面是一個實現jQuery Bootstrap圖片上傳的例子:
<div class="container"> <h3>圖片上傳</h3> <form action="upload.php" method="POST" enctype="multipart/form-data"> <div class="form-group"> <label for="file">選擇文件:</label> <input type="file" name="file" id="file"> </div> <button type="submit" class="btn btn-default">上傳</button> </form> </div> <script> $(document).ready(function() { $('form').submit(function() { var formData = new FormData($(this)[0]); $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: formData, async: false, cache: false, contentType: false, processData: false, success: function(data) { alert(data); } }); return false; }); }); </script>
這個代碼塊實現了一個簡單的圖片上傳功能,當我們選擇文件并點擊上傳按鈕時,會向服務器發送一個POST請求,服務器將會以multipart/form-data形式接受數據,然后返回一個上傳成功或失敗的信息。在這個過程中,我們使用了FormData對象,它可以將表單數據以鍵值對的形式傳遞給服務器。另外,我們使用了jQuery的ajax方法,它可以幫助我們更加方便地發送異步請求,并且無需刷新頁面即可顯示上傳結果。
上一篇后臺管理模板+css
下一篇mysql三表多對多查詢