2. 程式人生 > >實現點選圖片上傳檔案

實現點選圖片上傳檔案

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

上傳檔案的話可以這樣：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 

<title>Insert title here</title>
</head>
<body>
<%
	if(session.getAttribute("name") == null)
		response.sendRedirect("login.jsp");
%>
<form method="post" enctype="multipart/form-data" action="UpLoadServlet">
    <input type="file" name="upload_media" class="upload_media"
 
 multiple="multiple" /><br/>
    <button type="submit">上傳檔案</button> ${result}
</form>

<script src="http://code.jquery.com/jquery-latest.js">
	$(function(){
	    $('.upload_media').change(function(){
	        var files = $(this)[0].files;
	        for(var i = 0, f; f = files[
 
i]; i++){
                if(f.size < 2*1024*1024){
                    //如果需要自動提交表單，可以使用下面的這行程式碼，否者就等到使用者點選按鈕再上傳檔案
                    //$('.upload_media').parent().submit();
                }else{
                    alert(f.name + '檔案超出上傳大小限制！');
                }
	        }
	    })
	})
</script>
</body>
</html>

在這裡起到主要作用的就是<input type="file" name="" id=""/>這句
但是這個input type=file是一個很醜的框，如下：
在這裡插入圖片描述
如果我們要點選一個圖片，就能跳出選擇檔案的框該怎麼辦呢？
只要在圖片的上層疊加這個input就可以了…當然這個input的長寬要設定成和圖片一樣哦~
這樣當然很醜啦，然後我們用visibility:hidden或者opaticy:0把這個input隱藏掉！
demo:
在這裡插入圖片描述

如果想要上傳照片的話會比較麻煩：
即使加了只能選圖片的限制，在windows上依然可以通過選擇全部檔案，來上傳非圖片的東西。。
為了相容移動端，這個選擇圖片的限制必須加。 但是一旦加了，在pc上chrome會變得非常卡。現在的解決方法是。。。 點了以後就移除這個input，然後重新生成一個input插進去……
用document.createElement('input')生成新的，然後舊的removeChild移掉，appendChild插進來。
這樣是比較麻煩的…所以也可以找一下封裝好的圖片上傳的庫

相關推薦

實現點選圖片上傳檔案

上傳檔案的話可以這樣： <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

使用js和jquery實現點選圖片上傳及預覽

//上傳頭像 $(".avator-btn-fake").click(function(){ $("#upload").click(); }); $("#upload").change(function(){ var

百度 umEditor 點選圖片上傳問題

點選 umEditor 圖片按鈕沒有反應，原因是路徑問題。 window.UMEDITOR_HOME_URL = "/lyh/resources/umEditor/"; 上面

HTML+js+css實現點選圖片彈出上傳檔案視窗的兩種思路

第一種：CSS實現 <style> <!--  .fileInputContainer{         height:256px;         background:url(upfile.png);         position:rel

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

使用jquery上傳前，預覽圖片，裁剪，示例使用php接收上傳的檔案，並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片，只需要本地裁剪好即可，裁剪的時候也可以旋轉圖片。裁剪控制元件使用了，cropper。 html程式碼 <!DOCTYPE html> <html la

多次點選file上傳，資訊儲存在js集合中，不覆蓋上次點選資訊，js上傳多張圖片

頁面只有一個input file按鈕，一個確認上傳按鈕，要求：多次點選上傳，吧圖片資訊儲存入集合，點選確認按鈕，上傳所有圖片 多次點選這一個按鈕上傳圖片，在js中儲存為集合，但是遇到一個問題，當我點選第二次的時候，傳過來的this資訊會頂替掉上一次的this資訊， 也就是：上傳兩次，集合中有

HTML：如何點選圖片上的某個點實現對映連結

廢話不多說，附上程式碼 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap">   <area

ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）

private stream public 圖片 ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）七牛圖片上傳 SDK（.NET 版本）：https://developer.qiniu.com/kodo/sdk/1237/csharpUpoladServic

Android簡單實現將手機圖片上傳到server中

sdk etc mov 創建 ast bmi 以及 lena ews 在本例中。將會簡單的實現安卓手機將圖片上傳到server中。本例使用到了 server端：PHP+APACHE 客戶端：JAVA 先簡單實現一下server端的上傳並測試上傳

java圖片上傳-檔案/圖片上傳到七牛

java圖片上傳-檔案(圖片)上傳到七牛 一、在配置檔案中引入依賴（注：七牛開發者url：https://developer.qiniu.com/kodo） <-- 引入依賴 --> <dependency> <

JS實現點選按鈕，下載檔案

今天在實現下載功能時，後臺介面測試完成後，前臺在呼叫時發現，因為系統是基於token的，又不想把token顯示在url中，後來找到了一篇文章，講解了如何通過構造form表單提交請求後端介面，實現檔案下載，原文地址：https://www.cnblogs.com/hamsterPP/p/6763458.html

layui 點選頭像 上傳頭像

在開發過成中,難免是會要接觸到圖片上傳後實現即時預覽的,但是說實話,這樣實現起來不使用外掛的話,程式碼量還是有一點點的, 所以今天就推薦使用layui 來實現圖片的上傳功能,非常簡單和適用,廢話不多說 貼出程式碼來 #程式碼部分 <html> <head>

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

vue實現點選圖片放大圖片

### 使用vue一個元件vue-directive-image-previewer A Vue.js project for tag img, click img to zoom out to ful

react-native實現多張圖片上傳

最近在搞這個圖片上傳功能，，剛開始的時候iOS用的是 react-native-image-crop-picker這個外掛，，iOS那邊完美執行沒有毛病，，，但是到android這邊之後就開始報各種資源

簡單實現點選圖片放大的功能

背景：想在app中加上點選縮圖放大的效果，但是不想匯入大量的JS ，也無需哪些複雜的外掛，於是自己手寫了一個很簡單的實現，在這裡記下來。 程式碼很簡單，還有很多優化空間，時間有限，就沒有優化了 1 . 先準備大圖的位置 大圖是fixed於整個介面，只修改其中的s

HTML5 拖拽以及實現拖拽非同步上傳檔案

HTML5拖拽 一、傳統實現拖拽的方式 傳統的就是使用js實現元素的拖拽，核心原理如下： #box{ width:100px; height:100px; background:red; /*實現拖拽的核心之一！拖拽實質就是不斷改變其定位，所以需要先設定為絕對定位 然後結

Android:通過濾鏡實現點選圖片變暗效果

package com.linj.camera.view; import android.content.Context; import android.graphics.Color; import android.graphics.PorterDuff; import android.gra

Android實現拍照相簿圖片上傳功能

更改頭像功能不像修改資訊一樣直接提交引數就可以，需要上傳圖片檔案 我就直接貼程式碼了首先給出佈局檔案 <ImageView android:id="@+id/iv" android:layout_width="50d

laravel結合七牛實現base64的圖片上傳

確保傳到後臺的是純base64字串而不是以data開頭的 //base64圖片上傳 public function uploadCompressImg(Request $request) { $base64 = preg_replac