jquery擴充套件html5+canvas實現多張圖片預覽壓縮上傳

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

主要javascript程式碼

(function($){
	$.fn.extend({
		aiiUpload:function(obj)
		{
			if(typeof obj !="object")
			{
				alert('引數錯誤');
				return;
			}
			var imageWidth,imageHeight;
			var base64;
			var file_num=0;
			var fileInput=$(this);
			var fileInputId=fileInput.attr('id');
			createDoc('#'+fileInputId,obj.method,obj.action);
			$('#aii_file').change(function(){
				if(test(this.value)==false)
				{
					alert('格式錯誤');
					return;
				}
				var objUrl = getObjectURL(this.files[0]);
				if (objUrl) 
				{
					imgBefore(objUrl,file_num);
					render(objUrl,obj.max_h,obj.max_w,file_num);
					file_num++;
				}
			});
		}
	});
	function createDoc(objID,form_method,form_action)
	{
		var element=$(objID);
		element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file"  id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
	}
	function test(value)
	{
		var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
		return regexp.test(value);
	}
	function render(src,MaximgW,MaximgH,idnum)
	{
		var image=new Image();
		image.onload=function()
		{
			var canvas=document.getElementById('canvas');
			if(image.width>image.height)
			{
				imageWidth=MaximgW;
				imageHeight=MaximgH*(image.height/image.width);
			}
			else if(image.width<image.height)
			{
				imageHeight=MaximgH;
				imageWidth=MaximgW*(image.width/image.height);
			}
			else
			{
				imageWidth=MaximgW;
				imageHeight=MaximgH;
			}
			canvas.width=imageWidth;
			canvas.height=imageHeight;
			var con=canvas.getContext('2d');
			con.clearRect(0,0,canvas.width,canvas.height);
			con.drawImage(image,0,0,imageWidth,imageHeight);
			base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
			add_doc(base64,idnum);
		}
		image.src=src;
	};
	//建立一個可存取到該file的url
	function getObjectURL(file) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		return url ; 
	}
	//預覽
	function imgBefore(objUrl,idnum) 
	{
		var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
		$('.viewList').append(li);
		var img=$('#aiiImg_'+idnum);
		//預覽圖片居中 填滿 程式碼
		console.log('asdfasdfasdf');

		img.load(function(){
			var imgw=img.width(),
				imgh=img.height();
				console.log(imgw);
				console.log(imgh);
			if(imgw>imgh)
			{
				img.css('height','100%');
				img.css('width','auto');
				img.css('marginLeft',-(img.width()-img.height())/2+'px');
			}
			else if(imgw<imgh)
			{
				img.css('width','100%');
				img.css('height','auto');
				img.css('marginTop',-(img.height()-img.width())/2+'px');
			}
		});
	}

	function add_doc (base,idnum)
	{
		$('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
	}
})(jQuery);
function img_remove(element)
{
	var num=$(element).prev().attr('idnum');
	$(element).parent().remove();
	$('#f_'+num).remove();
	console.log('asdf');
}

HTML 程式碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-status-bar-style" content="block" />
	<meta name="fromat-detecition" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/aiiUpload.css" />
	<title></title>
	<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="lib/aiiUpload.js"></script>
</head>
<body>
<section class="section">
	<div id="box"></div>
	<p style="color:red;">*樣式修改請參考aiiUpload.css</p>
</section>
<script type="text/javascript">
	$('#box').aiiUpload({
		method:'POST',
		action:'form.php',
		max_h:300,
		max_w:300,
		subText:'上傳圖片',
		fileText:'選擇圖片'
	});
</script>
</body>
</html>

php程式碼

<?php
	for($i=0;$i<count($_POST['img']);$i++)
	{
		$IMG=base64_decode($_POST['img'][$i]);
		file_put_contents($i.'.png', $IMG);
		echo '<img src="'.$i.'.png" />';
	}
?>

有不好的地方，望大家指導

不知道哪裡上傳檔案~~~~~

jquery擴充套件html5+canvas實現多張圖片預覽壓縮上傳

主要javascript程式碼 (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") { alert('引數錯誤'); retur

ionic3從手機相簿選擇多張照片預覽並上傳到伺服器

安裝外掛①image-picker選擇多張照片--參照https://ionicframework.com/docs/native/image-picker/命令--ionic cordova plugin add cordova-plugin-telerik-imagepi

Html5 Canvas 實現兩張圖片合成

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" con

基於“formData批量上傳的多種實現” 的多圖片預覽、上傳的多種實現 formData批量上傳的多種實現

　　前言　　圖片上傳是web專案常見的需求，我基於之前的部落格的程式碼（請戳：formData批量上傳的多種實現）裡的第三種方法實現多圖片的預覽、上傳，並且支援三種方式新增圖片到上傳列表：選擇圖片、複製貼上圖片、滑鼠拖拽圖片，同時支援從上傳列表中移除圖片（點選“X”號）　　　　效果演示　　選擇

利用FileReader和FormData實現圖片預覽和上傳(base64轉二進位制檔案)

業務有個需求，要做圖片預覽上傳，過去都是客戶端上傳給後端，後端返回 url 前端進行預覽，現在其實可以不依賴後端做預覽，最後在上傳，這主要依賴 FileReader 和 FormData 這兩個物件和 JavaScript 處理二進位制的能力。 OK，Show cod

Django+jQuery cropper實現使用者頭像裁剪, 預覽和上傳[原創]

{% extends "account/base.html" %} {% load static %} {% block content %} {% if user.is_authenticated %} | <a href="{% url 'account_email' %}">Manage

js圖片預覽，上傳，前端修改檔名

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Demo</title> <!-- IE需要

Vue.js 2.0 移動端拍照壓縮圖片預覽及上傳

在學習和使用Vue.js 2.0 的過程中遇到不少不一樣的地方，本來移動端開發H5應用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結合起來使用，但是在拍照上傳的實現過程中遇到了無法呼叫plus的H5+介面的問題，所以最後拍照上傳功能還是使用input file方式裡解決的。但是

H5圖片預覽及上傳（WEB前端）

web上傳圖片很簡單，網上有許多的demo和js，但是本人嫌棄用那些會引入許多js包，所以還是用原生的jquery來寫吧。一、html佈局檔案 html有一個自己的上傳檔案控制元件---input，只需要將其type屬性設定為file即可上傳檔案，accept=“image/”是用來限制檔案型別為imag

利用jquery實現多張圖片淡入淡出

功能描述：圖片播放分為2個順序：正序和反序，正序就是從第一張到最後一張，然後再第一張，反序是從第一張開始，然後最後一張，再到第一張。 1：當沒有滑鼠操作時，圖片正序播放，每隔特定時間播放一次。 2：如果滑鼠從左向右滑動，則圖片跳過間隔時間，播放順序強制切換為正序，立即播放

微信小程序實現多張圖片同時上傳的方法

地址 complete 就是 name func pre files success fun 對於微信小程序上傳圖片其實很麻煩的，每次只能上傳一張，所有很多朋友就會問想要多張圖片上傳怎麽辦?這裏使用遞歸，當上傳完一張圖片後重新執行這個函數，直到所有的圖片都上傳完成後，就不再

uni-app圖片壓縮轉base64位利用遞歸來實現多張圖片壓縮

form raw zip nbsp trunc ucc 1.9 兩個文件 gettime //選擇圖片 chooseImage(){ let that =this uni.chooseImage({ sizeType: [‘original‘,‘c

uni-app圖片壓縮轉base64位利用遞迴來實現多張圖片壓縮

//選擇圖片 chooseImage(){ let that =this uni.chooseImage({ sizeType: ['original','compressed'], //可以指定是原圖還是壓縮圖，預設二者都有 count: 9,//預設9 suc

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

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

react-native實現多張圖片上傳

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

用matlab實現多張圖片合併

I = imread('qiegray.jpg'); i=imrotate(I,45); j=imrotate(I,315); h1 = axes('position', [0.0 0.0 1.0 1.0], 'parent', gcf); imshow(I, 'paren

使用h5的canvas實現兩張圖片的合併

思路： 1.首先等待圖片載入完成 2.然後使用canvas完成圖片的合併 3.顯示合成圖片步驟： 1.根據第一個思路，需要image的load和error事件,大致流程： var l_image = new Image(); l_image.sr

使用TransitionDrawable實現多張圖片淡入淡出的效果

歡迎介面想做出廣告頁自動輪播的效果，圖片切換的方式用淡入淡出的方式。這個在h5頁面很容易就實現了，但是在android介面中，很容易就想到了動畫animation動畫來實現，但是發現使用動畫的話，這種方式看起來不會自然，因為在呼叫statAnimation的時候

opencv2實現多張圖片路線路牌檢測_計算機視覺大作業2

linefinder.h同上一篇博文 main.cpp /*------------------------------------------------------------------------------------------*\ This file con

iOS 使用AFNetworking實現多張圖片上傳

#import "AFNetworking.h" /** * 上傳帶圖片的內容，允許多張圖片上傳（URL）POST * * @param url 傳url

jquery擴充套件html5+canvas實現多張圖片 預覽 壓縮 上傳

相關推薦

jquery擴充套件html5+canvas實現多張圖片預覽壓縮上傳