jquery上传图片_文件上传三种方式
2024-05-05 19:50:29
来源：python宝典 链接：
https://mp.weixin.qq.com/s/YUplCQDfAucA_rS8E1T6WA
需求
上传图片在页面显示
Form表单上传
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle>head><body><form method="POST" action="/upload.html" enctype="multipart/form-data"><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" value="提交" />form><div> {% if img %}<img style="height: 200px;width: 200px;" src="/{{ img }}" /> {% endif %}div><script src="/static/jquery-2.1.4.min.js">script>body>html>//后台代码from django.shortcuts import renderimport osdef upload(request): if request.method == 'GET': return render(request,'upload.html') elif request.method == "POST": user = request.POST.get('user') fafafa = request.POST.get('fafafa') obj = request.FILES.get('fafafa') file_path = os.path.join('static','upload',obj.name) f = open(file_path, 'wb') for chunk in obj.chunks(): f.write(chunk) f.close() ret = {'status': True, 'path': file_path} return render(request,"upload.html",{'img':file_path})缺点：上传后整个页面会刷新，不好
Ajax上传
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><style>.container img{width: 200px;height: 200px; }style>head><body><input ID="v1" name="user" placeholder="用户"><input type="file" name="fafafa" id="img" /><input type="button" value="提交XML" onclick="UploadXML()" /><input type="button" value="提交JQ" onclick="Uploadjq()" /><div id="imgs">div>body><script src="/static/jquery-2.1.4.min.js">script><script>function UploadXML() {var dic = new FormData(); dic.append('user', $('#v1').val()); dic.append('fafafa', document.getElementById('img').files[0]);var xml = new XMLHttpRequest(); xml.open('post', '/upload.html', true); xml.onreadystatechange = function () {if(xml.readyState == 4){var obj = JSON.parse(xml.responseText);console.log(obj)if(obj.status){var img = document.createElement('img'); img.src = "/" + obj.path;document.getElementById("imgs").appendChild(img); } } }; xml.send(dic); }function Uploadjq() {var dic = new FormData(); dic.append('user', $('#v1').val()); dic.append('fafafa', document.getElementById('img').files[0]); $.ajax({url: '/upload.html',type: 'POST',data: dic,processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType dataType: 'JSON',success: function (arg) {if (arg.status){console.log("111")var img = document.createElement('img'); img.src = "/" + arg.path; $('#imgs').append(img); } } }) }script>body>html>/后台代码from app01 import modelsimport jsonfrom django.shortcuts import render,HttpResponseimport os,jsondef upload(request): if request.method == 'GET': return render(request,'upload.html') elif request.method == "POST": user = request.POST.get('user') print(user) fafafa = request.POST.get('fafafa') obj = request.FILES.get('fafafa') file_path = os.path.join('static','upload',obj.name) f = open(file_path, 'wb') for chunk in obj.chunks(): f.write(chunk) f.close() ret = {'status': True, 'path': file_path} return HttpResponse(json.dumps(ret))实现了异步刷新，但是部分老版本的浏览器不支持FormData对象
基于iframe实现form提交
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><style>.container img{width: 200px;height: 200px; }style>head><body><h1>基于iframe实现form提交h1><form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data"><iframe style="display: none" id="iframe_1" name="iframe_1" src="" onload="loadIframe();">iframe><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" value="提交" />form><div id="imgs">div>body><script src="/static/jquery-2.1.4.min.js">script><script>function loadIframe() {console.log(1);// 获取iframe内部的内容var str_json = $('#iframe_1').contents().find('body').text();var obj = JSON.parse(str_json);if (obj.status){var img = document.createElement('img'); img.src = "/" + obj.path; $('#imgs').append(img); } }script>body>html>///后台代码from django.shortcuts import render,HttpResponseimport os,jsondef upload(request): if request.method == 'GET': return render(request,'upload.html') elif request.method == "POST": user = request.POST.get('user') print(user) fafafa = request.POST.get('fafafa') obj = request.FILES.get('fafafa') file_path = os.path.join('static','upload',obj.name) f = open(file_path, 'wb') for chunk in obj.chunks(): f.write(chunk) f.close() ret = {'status': True, 'path': file_path} return HttpResponse(json.dumps(ret))效果
python爬虫人工智能大数据公众号
jquery上传图片_文件上传三种方式相关推荐
- Python页面自动化文件上传两种方式
Python页面自动化测试之文件上传的两种方式 --广州_vivi 最近教学过程,学员项目出现测试上传文件无法执行的情况,分析发现学员项目的上传按钮并不是input按钮,导致无法使用直接定位元素方式进 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门
iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 文章目录 iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 PDF报表入门 3 ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
- 【文件上传漏洞绕过方式】
目录 前言 正文 总结 前言 目前,文件上传往往在业务中不可避免,也是极其容易出现上传漏洞.根据owasptop10中的排名,文件上传漏洞(属于攻击检测和防范不足)高居其中.今天和大家分享常见的文件上 ...
- sass文件编译的三种方式【舒】
[舒:]sass文件编译的三种方式 方式一: 1.webstorm打开evtGulp项目或者mcake-activity项目 2.中,开启gulp->default/develop,启动watc ...
- 用python打开文件夹的三种方式
用python打开文件夹的三种方式 一.利用explorer.exe import os# 利用explorer.exe执行 start_directory = r'C:\代码\软件包' os.sys ...
- 除了文件上传还有哪些方式可以写一句话木马？
除了文件上传还有哪些方式可以写一句话木马? 一句话木马如果上传到服务器的话,有啥危害学过网络安全的人都知道.但是通常网上流传的方式都是通过文件上传来实现木马上传,实在太过老套,这里就教大家几个新的方式 ...
最新文章
- 已知c语言程序有主程序模块prog.c,嵌入式系统试卷--A卷
- MySQL数据库备份之主从同步配置
- 用python实现自己的小说阅读器
- *.zip、*.tar、*.tar.gz、*.tar.bz2、*.tar.xz、*.jar、*.7z
- Flink SQL Client的datagen的用法(转载+自己验证)
- c语言match,LeetCode第10题: isMatch(C语言）
- cryptico.js java解密_從Cryptico.js中提取RSA私鑰
- 工作49：loaction注意
- 【CodeForces - 761D 】Dasha and Very Difficult Problem （构造，思维）
- 【资料下载】Python 第九讲——灵活运用docker，实现深度学习的环境搭建...
- VS2012下基于Glut OpenGL GL_QUAD_STRIP示例程序：
- 两台200smart以太网通讯_S7-200 SMART PLC之间如何实现以太网通信？（附接线图）
- ps批量处理--像素大小修改
- vue权限管理实现思路
- 申请苹果个人开发者经历
- 张老师的生日是哪一天？
- BZOJ4484: [Jsoi2015]最小表示
- 计算机缺失程序怎么办,win7电脑缺失dll文件软件打不开怎么办
- js加ajax实现分页
- 使用ST-LINK下载遇到的连接错误