2. 程式人生 > >選取圖片裁剪並上傳功能的實現（後臺java實現）

選取圖片裁剪並上傳功能的實現（後臺java實現）

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

頭像裁剪上傳功能，用到的技術有  jquery，springmvc，裁剪外掛用的是jcrop（中間遇到很多坑，最終跨越）。由於保密性我不能將別的原始碼傳送到網上，請大家見諒。

圖片上傳步驟：

1.使用者選擇圖片

2.將圖片傳入後臺：使用者選擇圖片的時候選擇的是各種各樣的，但是我們的網頁顯示圖片大小是有限的，所以我們就要在使用者選擇圖片之後將圖片新增到後臺進行壓縮，壓縮成我們想要的大小，之後再顯示到頁面才好

3.利用jcrop裁剪工具對圖片進行裁剪並且實時預覽

4.點選確定按鈕將裁剪用到的引數傳入後臺，後臺圖片進行剪下，之後縮放成我們需要的格式

5.最後將圖片路徑傳到前臺進行展示

前臺頁面程式碼為：

<script src="js-jcrop/jquery.min.js"></script>
<script src="js-jcrop/jquery.Jcrop.js"></script>
<script src="js/jquery-form.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* 控制預覽區域大小*/
#preview-pane .preview-container {
  width: 110px;
  height: 110px;
  overflow: hidden;
}
#targetDiv{
  width: 400px;
  height: 400px;
  background-color:#f7fdff;
}
</style>

<dl class="dialogBox D_uploadLogo">
	<dt class="dialogHeader">
		<span class="title">頭像上傳</span>
	</dt>
	
	<dd class="dialogBody">
		<dl class="bisinessLogo">
			<dt class="title">預覽</dt>
			<dd class="img">
				<div id="preview-pane">
				    <div class="preview-container">
				      <img src="" id="target2" class="jcrop-preview" alt="未選擇圖片" />
				    </div>
				 </div>
			</dd>
			<dd class="tc">尺寸：110*110px</dd>
		</dl>
		<dl class="bisinessInfo">
			<dt class="btnBox02">
				<form id="fileUp" action="/file/img/upload" method="post" enctype="multipart/form-data" target="ifm">
					<a class="btnGray" href="javascript:;">
						<span class="text" id="format">選擇圖片</span>  
						<b class="bgR"></b>
						<input type="file" id="file_upload" class="inputFile" name="userphoto"/>
						<input type="hidden" id="w" name="w"/>
						<input type="hidden" id="h" name="h"/>
						<input type="hidden" id="x" name="x"/>
						<input type="hidden" id="y" name="y"/>
					</a>
				</form>
			</dt>
			<dd class="info">
			
				請從本地選擇一張照片，支援jpg,png格式    <span id="msg"></span>
				<div id="targetDiv">
					<img src="" id="target" width="400" height="400" alt="未選擇圖片"/>
				</div>
			</dd>
		</dl>
	</dd>
	<input type="hidden" id="filePathInput" value=""/>

	<dd class="dialogBottom">
		<a class="btnBlue btn_confirm" href="javascript:;" onclick="photoSummit();"><span class="text">確定</span><b class="bgR"></b></a>
		<a class="btnGray btn_cancel" href="javascript:;" onclick="hideDialog();"><span class="text">取消</span><b class="bgR"></b></a>
	</dd>
</dl>

1.選擇圖片 

<img src="" id="target" width="400" height="400" alt="未選擇圖片"/>

2.提交：首先大家知道檔案上傳的時候用到的標籤為：<input type="file"/>   但是有時候我們需要用ajax提交檔案並且非同步提交，我們如果是用form表單提交的話就不是非同步，這樣我們回到頁面就重新整理頁面，非常的不方便，但是現在ajax還不能支援檔案提交的方式，這時候我們就用到了jquery-form.js,這個檔案支援我們用ajax提交檔案，程式碼為：

$("#fileUp").<span style="color:#ff0000;">ajaxSubmit</span>({
			type: "POST",
			url:"/file/img/upload",
			dataType: "json",
			contentType:"application/json", 
		        success: function(parameter){
		     	$("#target2").attr('src','/upload/'+parameter.fileName);
		     	$("#filePathInput").val('/upload/'+parameter.fileName);
		     	if($("#format").text()=="重新上傳"){
		     		jcrop_api.destroy()
		     	}
		     	$("#format").text("重新上傳");
		     	//啟動jcrop支援
		     	openJcrop('/upload/'+parameter.fileName);
			},
	        error : function(data) {  
	            alert("ajax傳輸發生錯誤！！！");
	        } 
		 });
這樣就能將檔案用ajax的方式提交到後臺，注意這裡用的是ajaxSubmit，這個方法對應jquery-form.js，後臺程式碼為：
package com.quanshi.ums.gate.view.rest.controllers;


import java.io.IOException;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


import com.quanshi.ums.gate.persistence.entities.Parameters;
import com.quanshi.ums.gate.view.rest.ImgEditor;




/**
 * 影象上傳和修改相關類
 * @author kunpeng.zhao
 *
 */
@Controller
@RequestMapping(value="/file")
public class FileEditorController {
<span style="white-space:pre">	</span>ImgEditor imgEditor = new ImgEditor();
<span style="white-space:pre">	</span>public String filePathFinal = "";
<span style="white-space:pre">	</span>private Logger logger = LoggerFactory.getLogger(FileEditorController.class);
<span style="white-space:pre">	</span>@RequestMapping(value="/img/cutandscale",method=RequestMethod.POST)
<span style="white-space:pre">	</span>public @ResponseBody int cutAndscaleimg(
<span style="white-space:pre">			</span>@RequestParam("w") int w,
<span style="white-space:pre">			</span>@RequestParam("h") int h,
<span style="white-space:pre">			</span>@RequestParam("x") int x,
<span style="white-space:pre">			</span>@RequestParam("y") int y
<span style="white-space:pre">			</span>){
<span style="white-space:pre">		</span>imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h);
<span style="white-space:pre">		</span>imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false);
<span style="white-space:pre">		</span>return 1;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>
    @RequestMapping(value="/img/upload",method=RequestMethod.POST)
    public @ResponseBody Parameters addImage(
    <span style="white-space:pre">		</span>@RequestParam("userphoto") MultipartFile file,
    <span style="white-space:pre">		</span>HttpServletRequest request,
    <span style="white-space:pre">		</span>HttpServletResponse response,
    <span style="white-space:pre">		</span>HttpSession session
    <span style="white-space:pre">		</span>){
    <span style="white-space:pre">	</span>String filePath = ""; 
    <span style="white-space:pre">	</span>try {
    <span style="white-space:pre">		</span>//上傳原圖
<span style="white-space:pre">			</span>filePath = imgEditor.uploadFile(file, request,session);
<span style="white-space:pre">			</span>filePathFinal = filePath;
<span style="white-space:pre">			</span>//將圖片壓縮成指定大小
<span style="white-space:pre">			</span>imgEditor.zoomImage(filePath,filePath,400,400);
<span style="white-space:pre">		</span>} catch (IOException e) {
<span style="white-space:pre">			</span>e.printStackTrace();
<span style="white-space:pre">		</span>}  
        logger.info("filePath:" + filePath);
        Parameters parameter = new Parameters();
        parameter.setFileName(imgEditor.getFileName(file,request,session));
    <span style="white-space:pre">	</span>return parameter;
    }
    
    
   
    
}

我在這規定圖片在前臺展示的大小為400*400，用到的圖片裁剪壓縮等的工具類為：

package com.quanshi.ums.gate.view.rest;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.multipart.MultipartFile;

public class ImgEditor {
	 /**
     * 改變圖片尺寸
     * @param srcFileName 源圖片路徑
     * @param tagFileName 目的圖片路徑
     * @param width 修改後的寬度
     * @param height 修改後的高度
     */
    public void zoomImage(String srcFileName,String tagFileName,int width,int height){  
	     try {
	      BufferedImage bi = ImageIO.read(new File(srcFileName));
	      BufferedImage tag=new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB);
	      tag.getGraphics().drawImage(bi, 0, 0, width, height, null);
	      ImageIO.write(tag, "jpg", new File(tagFileName));//畫圖
	     } catch (IOException e) {
	      e.printStackTrace();
	     }
    }
    
    
    
    /**
     * 縮放影象（按高度和寬度縮放）
     * @param srcImageFile 源影象檔案地址
     * @param result 縮放後的影象地址
     * @param height 縮放後的高度
     * @param width 縮放後的寬度
     * @param bb 比例不對時是否需要補白：true為補白; false為不補白;
     */
    public void scale(String srcImageFile, String result, int height, int width, boolean bb) {
        try {
            double ratio = 0.0; // 縮放比例
            File f = new File(srcImageFile);
            BufferedImage bi = ImageIO.read(f);
            Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH);
            // 計算比例
            if ((bi.getHeight() > height) || (bi.getWidth() > width)) {
                if (bi.getHeight() > bi.getWidth()) {
                    ratio = (new Integer(height)).doubleValue()
                            / bi.getHeight();
                } else {
                    ratio = (new Integer(width)).doubleValue() / bi.getWidth();
                }
                AffineTransformOp op = new AffineTransformOp(AffineTransform
                        .getScaleInstance(ratio, ratio), null);
                itemp = op.filter(bi, null);
            }
            if (bb) {//補白
                BufferedImage image = new BufferedImage(width, height,
                        BufferedImage.TYPE_INT_RGB);
                Graphics2D g = image.createGraphics();
                g.setColor(Color.white);
                g.fillRect(0, 0, width, height);
                if (width == itemp.getWidth(null))
                    g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2,
                            itemp.getWidth(null), itemp.getHeight(null),
                            Color.white, null);
                else
                    g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0,
                            itemp.getWidth(null), itemp.getHeight(null),
                            Color.white, null);
                g.dispose();
                itemp = image;
            }
            ImageIO.write((BufferedImage) itemp, "JPEG", new File(result));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    
    /**
     * 影象切割(按指定起點座標和寬高切割)
     * @param srcImageFile 源影象地址
     * @param result 切片後的影象地址
     * @param x 目標切片起點座標X
     * @param y 目標切片起點座標Y
     * @param width 目標切片寬度
     * @param height 目標切片高度
     */
    public void cut(String srcImageFile, String result,
            int x, int y, int width, int height) {
        try {
            // 讀取源影象
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源圖寬度
            int srcHeight = bi.getWidth(); // 源圖高度
            if (srcWidth > 0 && srcHeight > 0) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,
                        Image.SCALE_DEFAULT);
                // 四個引數分別為影象起點座標和寬高
                // 即: CropImageFilter(int x,int y,int width,int height)
                ImageFilter cropFilter = new CropImageFilter(x, y, width, height);
                Image img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(),
                                cropFilter));
                BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, width, height, null); // 繪製切割後的圖
                g.dispose();
                // 輸出為檔案
                ImageIO.write(tag, "JPEG", new File(result));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    //獲得檔名字
	public String getFileName(MultipartFile file, HttpServletRequest request,HttpSession session){
		String FILE_PATH = session.getServletContext().getRealPath("/") + "upload";
        String fileName = file.getOriginalFilename();  
        String[] suffixNameArr = fileName.split("\\.");
        String suffixName = suffixNameArr[suffixNameArr.length-1];
        String userName = SecurityContextHolder.getContext().getAuthentication().getName();
        
		return getTime() + userName+"."+suffixName;
	}
    //檔案上傳,返回檔案路徑
    public String uploadFile(MultipartFile file, HttpServletRequest request,HttpSession session) throws IOException {
    	String FILE_PATH = session.getServletContext().getRealPath("/") + "upload";
    	String fileName = getFileName(file,request,session);
        File tempFile = new File(FILE_PATH, fileName); 
        
        if (!tempFile.getParentFile().exists()) {  
            tempFile.getParentFile().mkdir();  
        }  
        if (!tempFile.exists()) {  
            tempFile.createNewFile();  
        }  
        file.transferTo(tempFile);  //將上傳檔案寫到伺服器上指定的檔案。
        
        return FILE_PATH + "\\" + tempFile.getName();  
    }  
  
   /* public static File getFile(String fileName) {  
        return new File(FILE_PATH, fileName);  
    } */ 
    
    public String getTime(){
    	Date date = new Date();
    	SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//設定日期格式
    	String nowTime = df.format(date).toString();
    	return nowTime;
    }
}
這樣就將圖片要裁剪的圖片路徑返回頁面展示

3.之後就是圖片裁剪了，圖片裁剪功能我找了好多外掛，最後鎖定jcrop，也是因為它的demo打動了我(太好看了),之後就是匯入檔案，至於這個裁剪工具具體的運用的話大家請參考這篇博文，當然這是被人寫的非常好，還有api可以看，http://blog.csdn.net/xht555/article/details/43407141  在我這裡，我在頁面接收後臺返回來的圖片路徑之後啟用jcrop，也就是openJcrop（）方法，這樣就可以載入jcrop外掛了，具體大家想進一步瞭解這個裁剪工具，請到官網細細的研究，我就不再做過多的談論了。

大家注意，在這裡有個大坑，真的是大坑，就是重新選擇圖片的時候，被jcrop載入過的img的src是不能被修改的，這個當初卡了我好長時間，被jcrop載入一次jcrop就會生成一個自己的編輯物件（我自己的理解），這時候就和原來的img沒有關係了，直到最後細細研究api才找到了一個方法，唯一的方法就是將這個jcrop銷燬，就是jcrop_api.destroy(),這個有很大的學問，我就提示一點，就是將jcrop_api宣告為全域性變數，下面貼出js程式碼（和上邊的html是在一個檔案下）：

<script type="text/javascript">
   	
	 $(function(){
	 	var jcrop_api;
	 });
	
	 $("#file_upload").change(function() {
	 	 $("#msg").text('');
		 var oFile = $(this)[0].files[0];
		 //判斷上傳檔案大小
	     if (oFile.size > 1*1024*1024) {
	          $("#msg").text('你選擇了太大的檔案，請選擇一個1M以下的影象檔案').css('color','red');
	          $(this).val("");
	          return;
	     }
    	   
    	  //判斷型別
    	  var filepath=$(this).val();
		  var extStart=filepath.lastIndexOf(".");
		  var ext=filepath.substring(extStart,filepath.length).toUpperCase();
		  if(ext!=".JPEG"&&ext!=".PNG"&&ext!=".JPG"){
		  	$("#msg").text('請選擇一個有效的影象檔案(jpg,png是允許的)').css('color','red');
		        $(this).val("");
		        return;
		  }
			
		$("#fileUp").ajaxSubmit({
			type: "POST",
			url:"/file/img/upload",
			dataType: "json",
			contentType:"application/json", 
		    success: function(parameter){
		     	$("#target2").attr('src','/upload/'+parameter.fileName);
		     	$("#filePathInput").val('/upload/'+parameter.fileName);
		     	if($("#format").text()=="重新上傳"){
		     		jcrop_api.destroy()
		     	}
		     	$("#format").text("重新上傳");
		     	//啟動jcrop支援
		     	openJcrop('/upload/'+parameter.fileName);
			},
	        error : function(data) {  
	            alert("ajax傳輸發生錯誤！！！");
	        } 
		 });
	});
	 function photoSummit(){
	 
		 //alert($("#w").val()+","+$("#h").val()+","+$("#x").val()+","+$("#y").val());
		 //$("#fileUp").attr("action", "/file/img/upload").submit();
		 if($("#w").val()>0 && $("#h").val()>0){
		 	$("#fileUp").ajaxSubmit({
				type: "POST",
				url:"/file/img/cutandscale",
				dataType: "json",
				contentType:"application/json", 
			    success: function(data){
			    	 $("#msg").text('上傳頭像成功！！！').css('color','red');
			    	 //alert($("#filePathInput").val());
			    	 window.parent.back($("#filePathInput").val());
				},  
			    error : function(data) {  
			        alert("ajax傳輸發生錯誤！！！");
			    } 
		    });
		 }else{
		 	$("#msg").text('請用滑鼠擷取圖片').css('color','red');
		 }  
	 }
	 //啟動jcrop
	function openJcrop(imgPath){
		//啟動jcrop支援
				var boundx,boundy,
		        xsize = $('#preview-pane .preview-container').width(),
		        ysize = $('#preview-pane .preview-container').height();
		        
			    $('#target').Jcrop({
			      minSize: [110, 110],
			      onChange: updatePreview,
			      onSelect: updatePreview,
			      aspectRatio: xsize / ysize
			    },function(){
			      // Use the API to get the real image size
			      var bounds = this.getBounds();
			      boundx = bounds[0];
			      boundy = bounds[1];
			      jcrop_api = this;
			    });
				jcrop_api.setImage(imgPath);
			    function updatePreview(c)
			    {
			      if (parseInt(c.w) > 0)
			      {
			        var rx = xsize / c.w;
			        var ry = ysize / c.h;
			
			        $('#preview-pane .preview-container img').css({
			          width: Math.round(rx * boundx) + 'px',
			          height: Math.round(ry * boundy) + 'px',
			          marginLeft: '-' + Math.round(rx * c.x) + 'px',
			          marginTop: '-' + Math.round(ry * c.y) + 'px'
			        });
			        $("#w").val(c.w);
			        $("#h").val(c.h);
			        $("#x").val(c.x);
			        $("#y").val(c.y);
			      }
			     };
	}
	 
	 
</script>

這樣我們就完成了編輯功能，之後我們點選提交就會將w,h,x,y引數傳到後臺，這個whxy表示我用一個在網上下載的圖片來表示：

4.傳到後臺之後的程式碼在上面我已經貼出，不做過多解釋，大家自己理解，不懂的可以給我留言

整篇博文純手打，如果大家覺得幼稚的借鑑的地方請給個贊，工作時候抽出時間比較難，但還是謝了這篇博文，如果誰發現bug或者不對的地方請隨時聯絡我，大家互相交流提高。

相關推薦

選取圖片裁剪並上傳功能的實現（後臺java實現）

頭像裁剪上傳功能，用到的技術有  jquery，springmvc，裁剪外掛用的是jcrop（中間遇到很多坑，最終跨越）。由於保密性我不能將別的原始碼傳送到網上，請大家見諒。 圖片上傳步驟： 1.使用者選擇圖片 2.將圖片傳入後臺：使用者選擇圖片的時候選擇的是各種各樣的，但

(轉)Android學習-使用Async-Http實現圖片壓縮並上傳功能

activit 一次 make down cte hot for lfw ram （轉）Android學習-使用Async-Http實現圖片壓縮並上傳功能 文章轉載自：作者：RyaneLee鏈接：http://www.jianshu.com/p/940fc7ba39e1

前臺Jcrop配合後臺Graphics實現圖片裁剪並上傳

模式 ubi ini gin pre log 清空 圖像 ets Jcrop：一個功能強大的圖片裁剪插件 版本：Jcrop v0.9.12 VS版本：vs2015 下載地址：http://code.ciaoca.com/jquery/jcrop/version/Jcrop-

如何有效實現前端壓縮圖片並上傳功能

res 滿足 utf boot ade 賦值 als 多次 and 　　隨著現在手機的像素越來越高，很多照片動輒幾兆甚至十幾兆，上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對於許多技術人員來說，處理起來這樣的問題往往不知道該怎麽下手，那麽下面就跟大家講解一下如何在前

【jQuery插件】使用cropper實現簡單的頭像裁剪並上傳

contex 高亮 leo 通過 時也 可能 現在 substring ica 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少時間才看到了這個插件

HTML5 本地裁剪圖片並上傳至伺服器（老梗）

很多情況下使用者上傳的圖片都需要經過裁剪，比如頭像啊什麼的。但以前實現這類需求都很複雜，往往需要先把圖片上傳到伺服器，然後返回給使用者，讓使用者確定裁剪座標，傳送給伺服器，伺服器裁剪完再返回給使用者，來回需要 5 步。步驟繁瑣不說，當很多使用者上傳圖片的時候也很影響伺服器效

js圖片壓縮並上傳？

nload src on() origin ner 加載 ons tex his js: var eleFile = document.querySelector(‘#file‘); // 壓縮圖片需要的一些元素和對象 var reader = new FileReader

vue 電腦端調攝像頭拍照，canvas轉base64，base64轉圖片檔案並上傳到伺服器

VUE（用了iview）：  <template> <div id='cameraUpload'> <Form ref='member' :label-width='120' :model='member' :rules='memb

jq實現圖片上傳預覽（注意jq版本）

一個jq實現上傳檔案預覽外掛uploadPreview.js /* *名稱:圖片上傳本地預覽外掛 *引數說明: Img:圖片ID;Width:預覽寬度;Height:預覽高度;ImgType:支援檔案型別;Callback:選擇檔案顯示圖片後回撥方法; *使用方法: &

android使用者頭像的選取，裁剪以及上傳

//在清單檔案中註冊activity <activity android:name=".activity.MyActivity.Agent.MyPictureActivity" android:screen

Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！

最近說專案可能會用到一個電子簽名，不需要識別的那種，只是一個單純手寫簽名，然後以base64的格式提供給前端web頁面。其實挺簡單的，自定義一個手寫view就上線了。Android 電子簽名，手寫簽名案列實現方法！ 先上圖： 按鈕說明：第一個按鈕是清除手寫板，第二個是將手寫板的

h5圖片上傳簡易版（FileReader+FormData+ajax）

eof block content relative $.ajax setattr img right ces 一、選擇圖片（input的file類型） <input type="file" id="inputImg"> 1. input的file類型會渲染

jQuery-uploader輕量級圖片上傳控制元件（可拖拽）

在xxx-uploader基礎上修改。 基於bootstrap和jQuery，需要引入 bootstrap.js 和 jQuery.js 原控制元件大小30多k，風格類似於bootstrap，可在css內修改樣式。 我這裡在uploader.js裡展現的樣式做了略微的調整：

bootstrap-wysiwyg中JS控制元件富文字中的圖片由本地上傳到伺服器（阿里雲、七牛、自己的資料庫）

一、我假設你是要儲存到自己的資料庫中（因為上傳到阿里雲、七牛更簡單原理一樣的） 點選插入圖片如下圖： 1、其實你插入的時候不需要做什麼處理一樣也可以插入資料庫的（但是前提你插入的那個欄位必須要求足夠空間比如Mysql你要用LONGTEXT型別，否則是存不下的這樣子前臺獲

圖片上傳至資料庫（新浪雲）的方法

        在程式開發中，經常會遇到上傳圖片的問題，那麼，下面的一段程式碼可以幫助你將圖片上傳至伺服器（本篇程式碼用的伺服器是新浪雲的SAE，伺服器端的程式碼是用thinkPHP編寫，會在後面貼出）。         直接上程式碼： 先匯入AFN的庫和標頭檔案 -(vo

為 .net 生態貢獻力量——製作並上傳 nuget 包（內有獨家彩蛋）

前言        nuget 是 .net 的常用包管理器，目前已經內建到 Visual Studio 2012 以後的版本。大多數 .net 包都託管在 nuget.org，包括 .net core 框架基礎包，得益於 .net core 的模組化設計，很多非核心包

【轉】使用git將項目上傳到github（最簡單方法）

名稱 posit gitignore nor this strong 共享 window mas 原文地址：http://www.cnblogs.com/cxk1995/p/5800196.html 首先你需要一個github賬號，所有還沒有的話先去註冊吧！ https:/

自定義上傳控件（兼容IE8）

lin 不同 而且 int 代碼 NPU 自定義 HA 過程 上傳控件是 <input type="file"/> 　　而實際開發過程中，都會自定義一個控件，因為這個控件本身難看，而且不同瀏覽器效果不一樣。 　　如IE8顯示如下： 　　谷歌瀏覽器顯示是這

使用git將專案上傳到github（最簡單方法） - 轉

方法如下 https://www.cnblogs.com/cxk1995/p/5800196.html   唯一需要注意的地方： 紅線框起來的地方，一定要改成"first commit"   或者其他內容，例如 git commit  

微信小程式多媒體檔案上傳及下載（springboot框架中）

/** * 微信檔案上傳介面 * @param file 待上傳檔案的完整路徑 */ public FileUploadOrDownload uploadTempMedia(String file) { /