2. 程式人生 > >上傳圖片能在HTML頁面顯示預覽

上傳圖片能在HTML頁面顯示預覽

阿新 • • 發佈：2019-01-20

一、HTML頁面：

      <!DOCTYPE html>

         <html>

                <head>

                       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                       <script src="/disk/weiqin/js/jquery.js" type="text/javascript"></script>

                </head>

               <body>

                      <div style="width: 33%;height: 110px;margin: 10px;">
                             <img src="" id="img1" width="100%" height="110px"/>
                      </div>

                      <a href="javascript:;" class="file">
                        上傳1
                             <input type="file" name="pic_store_environment"  id="file1" multiple="multiple"/>
                      </a>

                      <div style="width: 33%;height: 110px;margin: 10px;">
                             <img src="" id="img2" width="100%" height="110px"/>
                      </div>

                      <a href="javascript:;" class="file">
                        上傳2
                        <input type="file" name="pic_store_logo"  id="file2" multiple="multiple"/>
                      </a>

              </body>

二、JavaScript程式碼：

        <script>
            $(document).ready(function(e) {
                $("#sjrztj").click(function(){
                    var file0=document.getElementById("file1").value;
                    var file1=document.getElementById("file2").value;
                    if(file1.length<1){
                        alert("請上傳門店圖");
                        return false;
                    }
                    if(file2.length<1){
                        alert("請上傳店內環境圖");
                        return false;
                    }
                });
            });

        $("#file1").change(function () {
                // getObjectURL是自定義的函式，見下面  
// this.files[0]代表的是選擇的檔案資源的第一個，因為上面寫了 multiple="multiple" 就表示上傳檔案可能不止一個  
// ，但是這裡只讀取第一個  
                var objUrl = getObjectURL(this.files[0]);
                // 這句程式碼沒什麼作用，刪掉也可以  
                   console.log("objUrl = "+objUrl) ;  
                if (objUrl) {
                    // 在這裡修改圖片的地址屬性  
                    $("#img1").attr("src", objUrl);
                    
                }
            });

$("#file2").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                 console.log("objUrl = "+objUrl) ;  
                if (objUrl) {
                    $("#img2").attr("src", objUrl);


                }
            });


        </script>

相關推薦

上傳圖片能在HTML頁面顯示預覽

一、HTML頁面：       <!DOCTYPE html>          <html>                 <head>            

基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

.ajax sta http data .cn 數據 file prim 生成 demo例子： 依賴文件 ： http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本內容：

H5 移動端上傳圖片 和 視訊 頁面顯示縮圖

這是我第一次寫部落格，想要分享一下程式設計經驗，因為我也算是一個菜鳥而已，在程式設計過程中，很多問題 都是通過百度，通過CSDN裡面的各位大神分享的經驗，才得以解決的，所以我也是本著造福他人，也完善自己的意願，開始寫寫部落格，分享一下程式設計中遇到的問題及解決方法。好，廢話不

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮 html部分 <div id="adds" class="fix"> <form id="myForm" class="clearfix left" name="myForm"> <div clas

使用jquery無重新整理上傳圖片，可用於頭像預覽功能

</pre><p><span style="font-size:14px;">html：</span></p><p></p

【前端解決方案】input file 上傳圖片，並實現實時預覽

前言 我最近在做自己個人部落格的時候，遇到一個前端的問題，就是如何實時預覽 input 標籤上傳的圖片。一般的 <input type="file’ /> 標籤是不能實現實時預覽的。 解決方案 可以通過 file 標籤和 js 的 FileReader 介面來實

input[type='file']在選擇好要上傳的圖片後當前頁面實現預覽

需求在開發中，我們有時候要實現這種效果：在選擇要上傳的圖片後，如果頁面只是給出選擇檔案的名字的話，未免會降低使用者體驗，就比如，你要更換你賬戶的頭像，本地選擇好頭像後，而客戶端並沒有反饋，你無法預覽你的頭像，那豈不是非常不人性化？所以我們要達到的效果就是，當你在選擇好圖片後，

圖片檔案上傳（上面一篇是預覽）

圖片上傳和預覽是一起的，分別寫了兩個元件（上傳、預覽），在上傳中呼叫預覽，因放一起有點多故分開寫了 寫上傳元件attach <template> <div> <div class="pic-list" v-if="temp.fileList.length>

Android上傳圖片到伺服器並顯示(後臺用Java處理)

Android上傳圖片(Android Studio) Fragment介面： private String img_src; /** * 從相簿選取圖片 */ public void selectImg() { Intent intent = new

簡單封裝一個上傳外掛——支援拖拽和預覽

最近碰到一個需求。需要上傳很多圖片，但是又不是批量上傳。場景是這樣的。我需要從資料表中查出一行一行的資料，每一行都需要更新一個對應的圖片。天才需求方不喜歡批量上傳，因為需要讓他們給每個圖片命名。 原生input flie上傳能滿足對方需求，但是不能方便拖拽和預

百度編輯器上傳視訊以及視訊編輯器預覽bug解決

百度編輯器目前來講是運用比較廣泛的一個編輯器了，不僅開源還有中文的文件，所以很受歡迎，不過裡面也有許多地方需要開發人員自己除錯，其中一個比較常見的問題就是上傳視訊了，上傳視訊本身有一些小bug，這個基本最大的體現就是編輯器內無法預覽上傳的視訊問題。 我搜集了網上的解決方案

html頁面線上預覽PDF檔案

依賴：jquery.media.js，自行百度下載 下載後放入指定位置，例：/static/js/lib/jquery.media.js 靜態頁面核心程式碼： <div id="pdf_preview"></div> 以上靜態頁面還需要引入js

vue html jq 實現上傳圖片顯示在頁面上預覽

1、html程式碼 <img src="" alt="" id="myimg"> <input type="file" name="fileToUpload" id="fileToU

HTML頁面上傳圖片直接預覽

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上傳圖片</title> </head> <b

關於博客不能顯示上傳圖片的問題

瀏覽器剛寫博客就發現了一個比較頭疼的問題，圖片好好的，不能上傳。好不容易上傳成功，圖居然裂了。崩潰！！百度了一下解決辦法都不管用。突然想到前幾天因為系統太慢關了幾個服務。可能是那裏出了問題。果不其然，正是因為iis服務關閉導致的。解決方案一： 右鍵"此電腦"-->"管理"-->"服務和應用程

上傳圖片在頁面上顯示

doc this o-c post ring asc sof ros 顯示 看了別人寫的 自己照著寫了一下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%

html   上傳圖片，本頁預覽

html 上傳圖片 本頁預覽 直接上代碼<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圖片上傳預覽</title><script type="text/j

上傳圖片至數據庫及從數據庫中讀取圖片顯示至頁面

for循環 common 基於 serial 文件創建 每一個 super lis size 1.基於最簡單的servlet+jsp+jdbc實現 2.實驗環境：myeclipse以及tomcat 8.5 3.所需jar包： 　　 4.數據庫： 　　數據庫用的是mysql

vue富文本編輯，編輯自動預覽，單個圖片上傳不能預覽的問題解決：

pac themes indexof conf html_ sta spa load this //預覽<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-show="html

上傳圖片截圖預覽控制元件不顯示cropper.js 跨域問題

上傳圖片到圖片伺服器，因為域名不同，多以會有跨域問題。 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://img.xxx.com’ is there