表單.html
<form>
{% csrf_token %}
<table>
<tr>
<td>
<label for="name">NAME: </label>
<input type="text" data-bind="value: $data.name" name="name" class="form-control" id="name" placeholder="name of product">
</td>
</tr>
<tr>
<td>
<label for="price">PRICE </label>
<input type="text" name="price" data-bind="value:$data.price" class="form-control" id="price" placeholder="price">
</td>
</tr>
<tr>
<td>
<label for="description">DESCRIPTION: </label>
<textarea cols="10" rows="5" name="description" data-bind="value:$data.description" class="form-control" id="description" placeholder="product description"></textarea>
</td>
</tr>
<tr>
<td>
<label for="image">IMAGE: </label>
<input type="file" class="form-control-file" id="image" name="image" required>
</td>
</tr>
<tr><td><button type="button" id="submit" data-bind="click : save" class="btn btn-success">Submit</button></td></tr>
</table>
</form></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<!-- <script type="application/javascript" src="static/js/knockout-file-bind.js"></script> -->
<script>
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i ) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length 1) === (name '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
</script>
<script>
var ViewModel = function () {
var self = this;
self.save = function () {
var formdata = new FormData();
formdata.append('image', $('#image').get(0).files[0]);
formdata.append('name', ko.observable(""));
formdata.append('price', ko.observable(""));
formdata.append('description', ko.observable(""));
console.log(formdata)
$.ajax({
type: 'POST',
url: "{% url 'addProduct' %}",
data: formdata,
headers: {'X-CSRFToken': csrftoken},
processData: false,
contentType: false,
success: function (){
alert('The post has been created!')
},
error: function () {
alert("fail");
}
});
};
};
ko.applyBindings(new ViewModel())
</script>
</body>
</html>
視圖.py
def productform(request):
return render(request, 'app/product_form.html')
class ProductCreateView(CreateView):
model = Product
fields = ['name', 'price', 'description', 'image']
success_url=reverse_lazy('create-form')
def addProduct(request):
if request.method == "POST":
product=Product()
product.name = request.POST['name']
product.description = request.POST['description']
product.price = request.POST['price']
if len(request.FILES) != 0:
if len(product.image) > 0:
os.remove(product.image.path)
product.image = request.FILES['image']
product.save()
return render(request, 'app/product_form.html')
else:
return render(request, 'app/product_form.html')
# def get_success_url(self):
# return reverse('successlist')
def detail_view(request, id):
context ={}
context["data"] = Product.objects.get(id = id)
return render(request, "detail_view.html", context)
影像未保存在資料庫 django 我不知道是什么問題，但影像檔案名顯示在 ajax 的 console.log 中。問題是影像沒有保存到資料庫當我嘗試列印時（request.FILES）它顯示multidict是空的我已經給出了html代碼視圖代碼請檢查請幫我解決這個提前謝謝
uj5u.com熱心網友回復：
在您的 form.html 中嘗試添加
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
# the rest of your code
</form>
uj5u.com熱心網友回復：
如果您在 $.ajax 請求中使用 formdata 物件，則必須將資料欄位設定為該 formdata 物件。
此外，所有欄位都必須在其中，當您發出 ajax 請求時，將所有欄位附加到其中。
self.save = function () {
var formdata = new FormData();
formdata.append('image', $('#image').get(0).files[0]);
formdata.append('name', ko.observable(""));
formdata.append('price', ko.observable(""));
formdata.append('description', ko.observable(""));
$.ajax({
type: 'POST',
url: "{% url 'addProduct' %}",
data: formdata,
headers: {'X-CSRFToken': csrftoken},
processData: false,
contentType: false,
success: function (){
alert('The post has been created!')
},
error: function () {
alert("fail");
}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407852.html
標籤：