簡單的 圖片上傳 更改了默認的 file 文件樣式， 我這里是 圖片上傳成功后， 后臺會返回一個 圖片的絕對路徑 ，在把絕對路徑設置給 img 便簽，直接在前臺展示出來。

<form class="form-upload" id="formUpload" action="" method="post" enctype="multipart/form-data"><span class="form-upload-text" id="submitButton">上傳圖片</span><input type="file" class="form-upload-file" name="image" size="50" onchange="fileChange(this)"><img src="" class="form-upload-imgs" alt=""> </form> /* form 表單定位 */.form-upload {width:200px;height:200px;border:1px solid red;margin:200px auto;position:relative; } /* 相對于form 表單定位 設置提醒文字 位于 第五層 */.form-upload-text {position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%); } /* 相對于 form 表單定位 設置 點擊范圍位于最上層 第十層 */.form-upload-file {position:absolute;z-index:10;width:200px;height:200px;background-color:orange;opacity:0; } /* 相對于 form 表單 定位設置 位于 文字 與 文件中間展示 第八層 */.form-upload-imgs {position:absolute;z-index:8;width:200px;height:200px; } var imgUrl = ''function fileChange(target) {// 點擊 input 的時候if (target.tagName === 'INPUT') {// 獲取 form 表單的 第一個元素var formData = new FormData($('#formUpload')[0])// 發送 ajax $.ajax({// 類型type: "POST",// url 地址url: "xxxxxxx",// 表單數據data: formData,// 是否異步// async: false,// 請求頭設置contentType: false,// processData 默認為true，當設置為true的時候,jquery ajax 提交的時候不會序列化 data，而是直接使用data// 默認情況下會將發送的數據序列化以適應默認的內容類型application/x-www-form-urlencoded// 如果想發送不想轉換的的信息的時候需要手動將其設置為falseprocessData: false,// 成功的回調success: function(res) {console.log('圖片 ----》 ', res)// 這里是 上傳成功后 后臺會返回 一個圖片的絕對路徑imgUrl = res.data.imgUrl// 找到 img 標簽設置它的 圖片路徑$('.form-upload-imgs').attr('src', imgUrl)},// 失敗的回調error: function(returndata) {console.log(returndata);}})}}

總結

以上是生活随笔為你收集整理的js实现简单的图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。