search

Rplus / rplus.github.io

my blog~
http://rplus.github.io/
29 stars 4 forks source link

[POST] input:file format #6

Open Rplus opened 9 years ago

Rplus commented 9 years ago

各站的 input:file upload type

Rplus commented 9 years ago

m.facebook.com

單一發文頁

image

在 tag 上 第 1 個用單純的 button:button 來指定

第 2 個是用 aria-label="新增相片" + role="button" 來處理 而 :focus 狀態則大多有系統樣式作 highlight

兩個都是 bind js event

<-- 1. -->
<button class="_50o7 touchable _6-t _6-u" type="button" data-store="{&quot;nativeClick&quot;:true}" role="button" title="加張相片到貼文" data-sigil="touchable hidden-button composer-button photo-button">
  <i class="img sp_GohFOlnKZ5y sx_77f73c"></i>
  <i class="_6-v img sp_GohFOlnKZ5y sx_11f61d" style="
"></i>
</button>
<-- 2. -->
<div aria-label="新增相片" class="_vbz" data-sigil="touchable" role="button" tabindex="0" data-reactid=".m.1">
  <div class=" _52wf _4g33" data-reactid=".m.1.0">
    <div class="_2-24 _4g34 _5i2i  _52we" data-reactid=".m.1.0.0">
      <div class="_vbx" data-reactid=".m.1.0.0.0">
        <div class="_vby" data-reactid=".m.1.0.0.0.0"></div>
        <div class="_vbw" data-reactid=".m.1.0.0.0.1">相片</div>
      </div>
    </div>
  </div>
</div>

回覆內文

image

這裡是使用 input:file + role + aria-label 整套 sematic html 比較像是 label + input 的基本組合方式 不過這邊的 CSS 部份也挺有趣的唷~

font-size: 1000px !important;

XDDD

<-- 3. -->
<div class="_5s61 _2pii">
  <div class="_51s9 _3_5r">
    <a class="_5ecn" rel="ignore" role="button" aria-label="新增相片">
      <div class="_5aqx"></div>
      <div class="_51sa">
        <input type="file" class="_51sb" name="photo" id="u_0_x" accept="image/*" data-autoid="autoid_4">
      </div>
    </a>
  </div>
</div>
Rplus commented 9 years ago

facebook.com

上傳相片

一樣是以較正統的套裝 input:file + role="button" + aria-label 來處理 超巨大的 font-size 又再次出現 還是不太明瞭為何要設這麼大的字級

image

<!-- 1. -->
<a class="pvm fbTabGridItem" rel="ignore" id="u_a_2" role="button">
    <div class="title fsl fwb fcb">上傳相片／影片</div>
    <div class="_3jk">
        <input type="file" class="_n _5f0v" title="選取要上傳的檔案。" multiple="1" name="composer_unpublished_photo[]" aria-label="上傳相片／影片" id="js_1">
    </div>
</a>

近況更新框

image

這邊也是用標準的 input:file + aria-label 一樣的超大字級處理方式

<!-- 2. -->
<div class="lfloat" id="u_m_11">
  <div class="_6a _m _1dsq _1dsw" data-hover="tooltip" id="u_m_12" aria-label="新增相片到你的貼文">
    <a class="_1dsr" role="presentation" data-gt="{&quot;composer&quot;:{&quot;comp&quot;:&quot;addphoto&quot;,&quot;ua_id&quot;:&quot;composer:post&quot;}}" rel="ignore" id="u_m_13">
      <span class="_2nkx ellipsis">新增相片</span>
      <div class="_3jk">
        <input type="file" class="_n _5f0v" title="選取要上傳的檔案。" multiple="1" name="composer_unpublished_photo[]" aria-label="新增相片到你的貼文" id="js_2">
      </div>
    </a>
  </div>
</div>

簡易聊天框

image

用上了完整的表單 form + input:file 另外這邊的上傳是可以多檔上傳的， multiple

<!-- 3. -->
<div class="_6a _552o">
  <form action="https://upload.facebook.com/ajax/mercury/upload.php" method="post" data-reactid=".l" enctype="multipart/form-data">
    <input type="hidden" name="attach_id" data-reactid=".l.0">
    <input type="hidden" name="images_only" value="true" data-reactid=".l.1">
    <div class="_m _4q60 _3rzn _6a" data-reactid=".l.2">
      <a class="_4q61 _5f0v _509v" data-reactid=".l.2.0" tabindex="0">
        <i class="_509w img sp_DmA2cCKK0Tv sx_98ea3a" alt="相機" data-reactid=".l.2.0.0">
          <u data-reactid=".l.2.0.0.0">相機</u>
        </i>
        <div class="_3jk">
          <input type="file" class="_n _5f0v" name="attachment[]" multiple="" accept="image/*" data-reactid=".l.2.1" id="js_9">
        </div>
      </a>
    </div>
  </form>
</div>
<!-- 4. -->
<li class="_54ni _37_x __MenuItem" role="presentation">
  <a class="_54nc" href="#" role="menuitem">
    <span data-reactid=".55">
      <span class="_54nh" data-reactid=".55.1">
        <form action="https://upload.facebook.com/ajax/mercury/upload.php" method="post" data-reactid=".55.1.0" enctype="multipart/form-data">
          <input type="hidden" name="attach_id" data-reactid=".55.1.0.0">
          <div class="_m _4q60 itemLabel _6a" data-reactid=".55.1.0.1">
            <span class="_4q61 itemAnchor" data-reactid=".55.1.0.1.1">
              新增檔案......
              <div class="_3jk">
                <input type="file" class="_n _5f0v" name="attachment[]" multiple="" data-reactid=".55.1.0.1.0" id="js_1v">
              </div>
            </span>
          </div>
        </form>
      </span>
    </span>
  </a>
</li>

完整對話頁

image

也是循規 input:file + multiple 不過這邊沒有 aria-label 就是

另外就是上傳檔案跟上傳相片的方式不太一樣~ 上傳檔案還特別用 form 包了起來

<div class="_211">
  <!-- 5. -->
  <form class="_212" action="https://upload.facebook.com/ajax/mercury/upload.php" method="post" onsubmit="return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)" id="u_jsonp_3_9" enctype="multipart/form-data">
    <input type="hidden" name="fb_dtsg" value="AQFH7lFYQ7NI" autocomplete="off">
    <input type="hidden" autocomplete="off" class="_2qd" name="attach_id">
    <div class="_6a _m _4q60">
      <a class="_213 _4q61 uiButton" role="button">
        <i class="mrs customimg img sp_bQhvrjEn0rf sx_59eeff"></i>
        <span class="uiButtonText">
          <span class="_6q- _6qy">
            新增檔案
          </span>
        </span>
        <div class="_3jk">
          <input type="file" class="_n _5f0v" name="attachment[]" multiple="1" id="js_m">
        </div>
      </a>
    </div>
  </form>

  <!-- 6. -->
  <div class="_6a _m _2of _9_h" id="u_jsonp_3_7">
    <a class="_214 uiButton" role="button" rel="ignore" id="u_jsonp_3_8">
      <i class="mrs customimg img sp_bQhvrjEn0rf sx_3f1502"></i>
      <span class="uiButtonText">
        <span class="_6q- _6qy">
          加新相片
        </span>
      </span>
      <div class="_3jk">
        <input type="file" accept="image/*" class="_n _5f0v" name="composer_unpublished_photo[]" multiple="" id="js_18">
      </div>
    </a>
  </div>
</div>

回覆/回應 欄位

image

comment & reply 的上傳圖片都是一樣的結構，就寫在一起囉 結構較簡單，直接以 input:file + aria-label 結束~

<!-- 7. -->
<div class="UFIPhotoAttachLinkWrapper _m" data-hover="tooltip" data-tooltip-alignh="center" aria-label="附加一張相片" data-reactid=".c5.1:5.0.$right.0.0.0.1.0" id="js_6r">
  <i class="UFICommentPhotoIcon" data-reactid=".c5.1:5.0.$right.0.0.0.1.0.0">
    <input type="file" accept="image/*" class="_n" name="file" title="附加一張相片" aria-label="附加一張相片">
  </i>
</div>
Rplus commented 9 years ago

twitter.com

Twitter 的頁面保持地相當一致 基本結構的 component 非常乾淨 所以其實應該只要留一段 code 就夠了 XDD

top-timeline-tweetbox

image

Twitter 的圖片跟功能觸發大多是分開寫的 像這邊的 button.Icon 是圖(font-icon)， 但真正有功能的 input:file 卻是在另一層 這裡的 input 因為是用 label 包起來了，所以就沒再用多餘的 aria-label 包一次了 而瀏覽器預設的 input style，這裡覆蓋用的 css 也是蠻有趣的~

<!-- 1. -->
<div class="TweetBox-photoIntent">
  <div class="photo-selector">
    <button aria-hidden="true" class="btn icon-btn" type="button" tabindex="-1">
      <span class="tweet-camera Icon Icon--camera"></span>
      <span class="text add-photo-label">加入相片</span>
    </button>
    <div class="image-selector">
      <input type="hidden" name="media_data_empty" class="file-data" value="">
      <div class="multi-photo-data-container hidden"></div>
      <label class="t1-label">
        <span class="visuallyhidden">加入相片</span>
        <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png," class="file-input js-tooltip" tabindex="-1" data-original-title="加入相片">
      </label>
      <div class="swf-container"></div>
    </div>
  </div>
</div>

home-tweet-box

image

這一個與 (1.) 是同樣位置，但觸發出現時機不太一樣的 twitter 輸入框 ( 輸入框一般狀態是 1. ，點擊 focus 時會變 2.； blur 時又會變回 1. 結構則是一模一樣，class 也差不多~

<!-- 2. -->
<span class="TweetBox-mediaPicker">
  <div class="photo-selector">
    <button aria-hidden="true" class="btn icon-btn" type="button" tabindex="-1">
      <span class="tweet-camera Icon Icon--camera"></span>
      <span class="text add-photo-label">加入相片</span>
    </button>
    <div class="image-selector">
      <input type="hidden" name="media_data_empty" class="file-data" value="">
      <div class="multi-photo-data-container hidden"></div>
      <label class="t1-label">
        <span class="visuallyhidden">加入相片</span>
        <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png," class="file-input js-tooltip" tabindex="-1" data-original-title="加入相片" title="加入相片">
      </label>
      <div class="swf-container"></div>
    </div>
  </div>
</span>

topbar dialog

image

這一塊是最上方固定共用的 topbar 新增貼文時出現的 dialog 內的上傳檔案 一樣 Twitter 保持著相當高的共同 pattern 這部份的結構也是一模一樣

個人覺得快速貼文這是 Twitter 跟 FB、G+ 最大的功能差異 Twitter 希望是發貼文愈多愈好，其它的則是會想：瀏覽愈多愈好

<!-- 3. -->
<span class="TweetBox-mediaPicker">
  <div class="photo-selector">
    <button aria-hidden="true" class="btn icon-btn" type="button" tabindex="-1">
      <span class="tweet-camera Icon Icon--camera"></span>
      <span class="text add-photo-label">加入相片</span>
    </button>
    <div class="image-selector">
      <input type="hidden" name="media_data_empty" class="file-data" value="">
      <div class="multi-photo-data-container hidden"></div>
      <label class="t1-label">
        <span class="visuallyhidden">加入相片</span>
        <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png," class="file-input js-tooltip" tabindex="-1" data-original-title="加入相片">
      </label>
      <div class="swf-container"></div>
    </div>
  </div>
</span>

私訊對話框

私訊對話框 dialog 的上傳圖片區塊 一樣結構

image

<!-- 4. -->
<div class="tweet-box-extras">
  <div class="photo-selector">
    <button aria-hidden="true" class="btn icon-btn" type="button" tabindex="-1">
      <span class="tweet-camera Icon Icon--camera"></span>
      <span class="text add-photo-label">加入相片</span>
    </button>
    <div class="image-selector">
      <input type="hidden" name="media_data_empty" class="file-data" value="">
      <div class="multi-photo-data-container hidden"></div>
      <label class="t1-label">
        <span class="visuallyhidden">加入相片</span>
        <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png," class="file-input js-tooltip" tabindex="-1" data-original-title="加入相片">
      </label>
      <div class="swf-container"></div>
    </div>
  </div>
</div>
Rplus commented 9 years ago

Gmail (標準版)

撰寫新信

aria-label + role="button" + JS binding event

<div class="wG J-Z-I" command="Files" data-tooltip="附加檔案" aria-label="附加檔案" tabindex="1" id=":14z" role="button" aria-pressed="false" aria-haspopup="true" aria-expanded="false" style="-webkit-user-select: none;">
  <div class="J-J5-Ji J-Z-I-Kv-H" style="-webkit-user-select: none;">
    <div class="J-J5-Ji J-Z-I-J6-H" style="-webkit-user-select: none;">
      <div id=":14y" class="a1 aaA aMZ" style="-webkit-user-select: none;">
        <div class="a3I" style="-webkit-user-select: none;">&nbsp;</div>
      </div>
    </div>
  </div>
</div>
Rplus commented 9 years ago

imgur.com

upload image

image

simple input:file with big size by CSS

<div id="upload-global-file-wrapper">
  <span class="computerIcon"></span>
  <span class="green">browse</span> your computer

  <input accept="image/*" type="file" name="Filedata" multiple="multiple" id="upload-global-file">
</div>