在網頁開發中，預覽圖片是一個常見的需求。我們可以使用 jQuery 來讀取圖片文件并實現預覽功能。下面是一個簡單的示例：

$(function() {
// 選擇文件按鈕的點擊事件
$('#selectFileBtn').on('click', function() {
$('#fileInput').click(); // 觸發文件選擇框
});
// 文件選擇框的 change 事件
$('#fileInput').on('change', function() {
// 獲取選中文件的信息
var file = $(this).prop('files')[0];
var fileName = file.name;
var fileSize = file.size;
var fileType = file.type;
// 判斷文件類型為圖片
if (fileType.indexOf('image') !== -1) {
// 使用 FileReader 對象讀取文件內容
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
var dataURL = reader.result;
// 顯示圖片預覽
$('#imgPreview').attr('src', dataURL);
$('#imgPreview').show();
};
} else {
alert('請選擇圖片文件！');
}
});
});

上面的代碼中，我們首先綁定了一個選擇文件按鈕的點擊事件，當點擊這個按鈕時就會觸發文件選擇框。文件選擇框的 change 事件會在用戶選中文件后觸發，在事件處理函數中我們首先獲取選中文件的一些基本信息，如文件名、文件大小和文件類型。然后判斷文件類型是否為圖片類型，如果是就借助 FileReader 對象讀取文件內容。最后將讀取到的文件內容展示在頁面上，實現圖片預覽的功能。

代碼中最重要的部分就是使用 FileReader 對象來讀取文件內容并獲取文件的 Base64 編碼，這個編碼可以直接用于圖片的展示。因為 FileReader 對象是 HTML5 新增的 API，所以在一些舊版本的瀏覽器中可能會不支持。在使用時需要注意兼容性的問題。