實現點選圖片上傳檔案
上傳檔案的話可以這樣:
<%@ 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