2. 程式人生 > >Django+jQuery cropper實現使用者頭像裁剪, 預覽和上傳[原創]

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

阿新 • • 發佈：2019-01-13
{% extends "account/base.html" %} {% load static %} {% block content %} {% if user.is_authenticated %} | <a href="{% url 'account_email' %}">Manage Email</a>  | <a href="{% url 'account_change_password' %}">Change Password</a> | <a href="{% url 'account_logout' %}">Logout</a>
{% endif %} <p>Welcome, {{ user.username }}.    {% if not user.profile.account_verified %}    (Unverified email.)    {% endif %} </p> <body style="overflow:hidden;"> <div class="ibox-content">   <div class="row">      <div id="crop-avatar" class="col-md-6">         <div
class="avatar-view" title="點選更換頭像" >            <img src="{{ user.profile.get_avatar_url }}" >         </div>      </div>   </div> </div> <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1"
>   <div class="modal-dialog modal-lg">      <div class="modal-content">         <form class="avatar-form" action="{% url 'myaccount:ajax_avatar_upload' %}" enctype="multipart/form-data" method="post">            <div class="modal-header">               <button class="close" data-dismiss="modal" type="button">&times;</button>               <h4 class="modal-title" id="avatar-modal-label">上傳頭像</h4>            </div>            <div class="modal-body">               <div class="avatar-body">                  <div class="avatar-upload">                     <input class="avatar-src" name="avatar_src" type="hidden">                     <input class="avatar-data" name="avatar_data" type="hidden">                     <label for="avatarInput">圖片上傳</label>                     <input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></div>                  <div class="row">                     <div class="col-md-9">                        <div class="avatar-wrapper"></div>                     </div>                     <div class="col-md-3">                        <div class="avatar-preview preview-lg"></div>                        <div class="avatar-preview preview-md"></div>                        <div class="avatar-preview preview-sm"></div>                     </div>                  </div>                  <div class="row avatar-btns">                     <div class="col-md-9">                                   <div class="btn-group">                           <button class="btn" data-method="zoom" data-option="0.1" type="button" title="放大圖片"><i class="fa fa-repeat"></i> 放大圖片</button>                        </div>                                <div class="btn-group">                           <button class="btn" data-method="zoom" data-option="-0.1" type="button" title="縮小圖片"><i class="fa fa-repeat"></i> 縮小圖片</button>                        </div>                                <div class="btn-group">                           <button class="btn" data-method="setDragMode" data-option="move" type="button" title="移動圖片"><i class="fa fa-repeat"></i> 移動圖片</button>                        </div>                     </div>                     <div class="col-md-3">                        <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i>儲存修改</button>                     </div>                  </div>               </div>            </div>            {% csrf_token %}      </form>   </div>  </div> </div> <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div> </body> <h2>My Profile (<a href="{% url 'myaccount:profile_update' %}">Edit</a> )</h2> <ul>    <li>First Name: {{ user.first_name }} </li>    <li>Last Name: {{ user.last_name }} </li>    <li>Organization: {{ user.profile.org }} </li> </ul> {% endblock %} {% block css %} <link href="{% static 'myaccount/cropper/cropper.min.css' %}" rel="stylesheet"> <link href="{% static 'myaccount/sitelogo/sitelogo.css' %}" rel="stylesheet"> {% endblock %} {% block js %} <script src="{% static 'myaccount/bootstrap/js/jquery.min.js' %}"></script> <script src="{% static 'myaccount/cropper/cropper.min.js' %}"></script> <script src="{% static 'myaccount/sitelogo/sitelogo.js' %}"></script> <script src="{% static 'myaccount/bootstrap/js/bootstrap.min.js' %}"></script> {% endblock %}

相關推薦

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

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

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

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

使用input[type=file]原生實現圖片的預覽和上傳

1. 模仿表單提交： 建立一個FormData物件          呼叫它的 append() 方法來新增欄位 // formData.append(key, value); var fd = new FormData(); fd.append("username",

jQuery使用Base64 生成圖片預覽和java後臺不同的接收處理方式

本文主要解決移動或者pc端上傳圖片及生成預覽的問題 1.jQuery 生成base64編碼,前臺預覽 2.jsp 自定義上傳按鈕兩種方式的上傳 input file 和 input hidden 3.java後臺兩種方式的上傳操作 SpringMvc自身的

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

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

移動端HTML5 檔案預覽及上傳

本文主要介紹使用HTML5 圖片上傳及上傳前的預覽。本人是做PHP後端的，由於前端有時也需要自己寫，有空就研究了下圖片上傳預覽，寫的都是原生程式碼，廢話不多說，直接上程式碼。 前端程式碼 <!DOCTYPE html> <html lang

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

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

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

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

html5預覽並上傳圖片的功能

html5支援圖片預覽 具體程式碼:上傳頁面 upload_h5.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用html5

前端預覽input上傳的圖片

既然要實現在前端預覽上傳的圖片，我們需要先了解input 和 file型別 Input 標籤的file型別，提供了上傳檔案的功能，通過此型別，可以上傳檔案到伺服器。 input的file型別，在上傳檔案時，會返回一個File物件，這個物件會存在一個FileList數組裡邊

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

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

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

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

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

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

cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。

urlencode button 圖片 all 完成 r.js borde lan meta 一 、準備工作 1.首先需要先下載cropper,常規使用npm，進入項目路徑後執行以下命令： npm install cropper 2. cropper基於

django 上傳頭像並預覽 3選1

email middle cit for bin utf files ajax 圖片地址 註冊頁面的頭像上傳 register.html<!DOCTYPE html> 1 <html lang="en"> 2 <head> 3

使用JCrop進行圖片裁剪，裁剪js說明，裁剪預覽，裁剪上傳，裁剪設計的圖片處理的工具類和程式碼

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

jquery.fileupload.js外掛使用初探--多圖片上傳預覽

 一、前臺程式碼： <!DOCTYPE html> <html> <head> <title>jquery.fileupload.js使用測試</title> <script src="jq

jquery.fileupload.js外掛使用初探--單圖片上傳預覽

一、官方外掛下載地址：http://plugins.jquery.com/blueimp-file-upload/         下載下來後會發現裡面包含了一堆檔案，首先需要弄清楚的是最核心的部分是哪些，根據官方的例子可以知道，一個最簡單的jQuery File Uplo

基於Jcrop,layer,uploadify 組裝的頭像,圖片預覽裁切 功能

一般不會寫部落格,也不知道怎麼排版,so,上重點, 專案需求:系統會員需要自定義頭像,並且可以選擇裁切,此為需求,由於網路上找了好久,沒發現有合適的,所以,自己組裝了,額,說好的重點來

基於Vue + Node.js + MongoDB的圖片上傳組件，實現圖片的預覽和刪除

信息 clas 發送數據 演示 新增 one input標簽 return tof 公司要寫一些為自身業務量身定制的的組件，要基於Vue,趁著這個機會，自己在業余時間也寫了個組件，選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊，所以這次好好了解了一下。演示在網址打開後的