JS實現頁面粘貼圖片直接Ajax上傳實例頁面

HTML代碼：

<div id="preview"></div> <p id="log"></p>

JS代碼：

document.addEventListener('paste', function (event) { var items = (event.clipboardData || window.clipboardData).items; var file = null; if (items && items.length) { // 搜索剪切板items for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile(); break; } } } else { log.innerHTML = '<span style="color:red;">當前瀏覽器不支持</span>'; return; } if (!file) { log.innerHTML = '<span style="color:red;">粘貼內容非圖片</span>'; return; } // 此時file就是咱們的剪切板中的圖片對象 // 若是須要預覽，能夠執行下面代碼 var reader = new FileReader() reader.onload = function(event) { preview.innerHTML = '<img src="' + event.target.result + '" class="upload-image">'; } reader.readAsDataURL(file); // 若是不須要預覽，上面這段能夠忽略 // 這裏是上傳 var xhr = new XMLHttpRequest(); // 上傳進度 if (xhr.upload) { xhr.upload.addEventListener('progress', function (event) { log.innerHTML = '正在上傳，進度：' + Math.round(100 * event.loaded / event.total) / 100 + '%'; }, false); } // 上傳結束 xhr.onload = function () { var responseText = xhr.responseText; log.innerHTML = '上傳成功，地址是：' + responseText; }; xhr.onerror = function () { log.innerHTML = '<span style="color:red;">網絡異常，上傳失敗</span>'; }; xhr.open('POST', './upload.php', true); xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name)); xhr.send(file); });