如何在DJANGO中使用AJAX上傳影像-有解無憂

  /* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}


/* SIDE NAV INSIDE ADD PROPERTY MODAL */

.side-nav,
.nav-menu {
  height: 100%;
}

.side-nav .nav-menu {
  list-style: none;
  padding: 40px 0;
  width: 13em;
  background-color: #3498db;
}

.side-nav .nav-item {
  position: relative;
  padding: 0.7em 1.5em;
  position: relative;
  top: 42%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-item.active {
  background-color: #fff;
  box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
  color: #2980b9;
}

.nav-item a {
  text-decoration: none;
  color: #fff;
}

.menu-text {
  padding: 0 20px;
}

.side-nav .nav-item.active::before {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 150%;
  width: 20px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 100%;
  right: 0;
  height: 150%;
  width: 20px;
  border-top-right-radius: 25px;
  box-shadow: 0 -20px 0 0 #fff;
}


/* UPLOAD IMAGE STYLE */

:root {
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: rgb(196, 195, 196);
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
}


/* End General Styles */


/* Upload Area */

.upload-area {
  width: 100%;
  max-width: 25rem;
  background-color: var(--clr-white);
  box-shadow: 0 5px 10px rgb(218, 229, 255);
  border: 2px solid var(--clr-light-blue);
  border-radius: 24px;
  padding: 1rem 1.875rem 0rem 1.875rem;
  margin: 0.625rem;
  text-align: center;
}


/* Header */

.upload-area__title {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.upload-area__tooltip {
  position: relative;
  color: var(--clr-light-blue);
  cursor: pointer;
  transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
  color: var(--clr-blue);
}

.upload-area__tooltip-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -125%);
  min-width: max-content;
  background-color: var(--clr-white);
  color: var(--clr-blue);
  border: 1px solid var(--clr-light-blue);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: none 300ms ease-in-out;
  transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
  opacity: 1;
  visibility: visible;
}


/* Drop Zoon */

.upload-area__drop-zoon {
  position: relative;
  height: 13.8rem;
  /* 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed var(--clr-light-blue);
  border-radius: 15px;
  margin-top: 1.1rem;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
  border-color: var(--clr-blue);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--clr-blue);
  transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: 0.625rem;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}

.drop-zoon__file-input {
  display: none;
}


/* (drop-zoon--over) Modifier Class */

.drop-zoon--over {
  border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}


/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}


/* File Details Area */

.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}


/* (duploaded-file--open) Modifier Class */

.file-details--open {
  height: auto;
  visibility: visible;

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<form action="" enctype="multipart/form-data" method="POST" id="id_ajax_upload_form">
  {% csrf_token %}
  <div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content add-property">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </button>
        </div>
        <div class="modal-body" style="padding: 0;">
          <div class="row g-0 main-add-row">

            <div class="col-sm-3" style="padding: 0;">
              <nav class="side-nav">
                <ul class="nav-menu">
                  <li class="nav-item active" id="img-nav-link">
                    <a href="#">
                      <i class="fa-solid fa-file-arrow-up"></i>
                      <span class="menu-text">Upload Image</span>
                    </a>
                  </li>
                  <li class="nav-item" id="prop-info-nav-link">
                    <a href="#">
                      <i class="fa-solid fa-house-chimney-crack"></i>
                      <span class="menu-text">Propery Info</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>

            <div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">

              <!-- UPLOAD IMAGE SECTION START -->
              <div id="uploadArea" class="upload-area" data-target="img-nav-link">
                <!-- Header -->
                <div class="upload-area__header">
                  <h1 class="upload-area__title">Upload your file</h1>
                  <p class="upload-area__paragraph">
                    File should be an image
                    <strong class="upload-area__tooltip">
                                                Like
                                                <span class="upload-area__tooltip-data"></span>
                                                <!-- Data Will Come From Js -->
                                            </strong>
                  </p>
                </div>
                <!-- End Header -->

                <!-- Drop Zoon -->
                <div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
                  <span class="drop-zoon__icon">
                                            <i class='bx bxs-file-image'></i>
                                        </span>
                  <p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
                  <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                  <img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
                  <input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
                </div>
                <!-- End Drop Zoon -->

                <!-- File Details -->
                <div id="fileDetails" class="upload-area__file-details file-details">
                  <div id="uploadedFile" class="uploaded-file">
                    <div class="uploaded-file__icon-container">
                      <i class='bx bxs-file-blank uploaded-file__icon'></i>
                      <span class="uploaded-file__icon-text"></span>
                      <!-- Data Will be Comes From Js -->
                    </div>
                    <div id="uploadedFileInfo" class="uploaded-file__info">
                      <span class="uploaded-file__name">Project 1</span>
                      <span class="uploaded-file__counter">0%</span>
                    </div>
                  </div>
                </div>
                <!-- End File Details -->
              </div>
              <!-- UPLOAD IMAGE SECTION END -->

              <!-- PROPERTY INFO START -->
              <div class="row g-0 justify-content-center prop-info-row" data-target="prop-info-nav-link" style="display: none;">
                <div class="col-md-8 prop-info-col">
                  <p style="font-weight: 600;">Property Type</p>
                </div>
                <div class="col-md-8 d-flex justify-content-center prop-info-col">
                  <select name="property-types" id="property-types">
                    <option value="volvo">Tenament</option>
                    <option value="saab">Car</option>
                    <option value="opel" selected>Helicopter</option>
                    <option value="audi">Space Shuttle</option>
                  </select>
                  <div class="input-group mb-3 ms-3">
                    <span class="input-group-text" id="basic-addon1">OR</span>
                    <input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
                  </div>
                </div>
                <div class="col-md-8 d-flex justify-content-center prop-info-col mt-5">
                  <input type="text" id="prop-name" class="add-inpt" placeholder="Property Name" autocomplete="off">
                </div>
                <div class="col-md-8 d-flex justify-content-center prop-info-col mt-3">
                  <input type="text" id="prop-address" class="add-inpt" placeholder="Property Address" autocomplete="off">
                </div>
              </div>
              <!-- PROPERTY INFO END -->
            </div>

          </div>
        </div>
        <div class="modal-ftr">
          <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
        </div>
      </div>
    </div>
  </div>
</form>

我最近一直在使用 AJAX 和 DJANGO 來發送文本資料。它一直作業順利，感覺是一個簡單的方法。但我無法理解并且沒有適當的資源來學習使用 AJAX 發送影像并保存到 Django 資料庫。

HTML：

<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">

JS：

        $(".add-prop").click(function() {
            var data = new FormData();
            data.append("image", $("#fileInput-single")[0].files[0])
            data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
            $.ajax({
                method: "POST",
                url: "{% url 'upload-prop-images' %}",
                processData: false,
                contentType: false,
                mimeType: "multipart/form-data",
                data: data,
                success: function(data) {
                    if (data.status == "Upload Done") {
                        console.log("Uploading Done successfully")
                    }
                }
            })
        });

models.py

class Property(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
    prop_images = models.ImageField(upload_to="prop_images")

views.py

def uploadPropImages(request):
    image = request.POST['image']

    property_new = Property(user_id=request.user.id, prop_images=image)
    property_new.save()

    return JsonResponse({'status': 'Upload Done'})

urls.py

urlpatterns = [
    path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]

有一個使用該forms.py檔案的教程，但我不想創建forms.py檔案。

uj5u.com熱心網友回復：

HTML

<form id="upload-file" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="file">
    <button type="submit" class="btn btn-success">Upload</button>
</form>

$('body').on('submit','#upload-file',function(e){
   e.preventDefault()
   var formData = new FormData(this);
   $.ajax({
         url:'/url/',
         type: 'POST',
         data: formData,
         success: function (response) {
         },
         error: function (response) {
         },
        cache: false,
        contentType: false,
        processData: false
   });

視圖.py

def fileupload(request):
     if request.method=="POST":
          property = Property()
          property.prop_images = request.FILES['file_name']
          property.user = self.request.user.username
          property.save()
      return JsonResponse({})

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/434874.html

標籤：django 阿贾克斯 django模型 django-views

上一篇：是否可以使用Ajax表單提交傳遞路由值？

下一篇：如何洗掉不直接呼叫函式的事件監聽器？