BBS功能之Ajax上传图片

1. 先设置路由

url(r‘^upload_img‘, upload_img),      

2. 建立函数

def upload(request):
    return render(request,‘upload.html‘) 

3. 编写upload.html

//这次我们先学jquery方式
<body>
    <h1>上传图片</h1>
    <input type="file" name="fafafa">
    <input type="button" value="点我点我" onclik = "uploadImg()">
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        function uploadImg() {

                }

            })

        }
    </script>
</body>

4. 运行一下页面

5. 继续编写 upload.html

<body>
    <h1>上传图片</h1>
    <input id="fafafa" type="file" name="fafafa">
    <input type="button" value="点我点我" onclik = "uploadImg()">
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        function uploadImg() {
            //获取文件
            //上传文件
            //预览
            var formData = new FormData();                   //data对象 上传的图片先给这个对象然后传递给data
            formData.append(‘a1‘,$(‘#fafafa‘)[0].files[0]); // 这就是取到的图片文件 固定格式
            console.log(formData);
            $ajax({
                url:‘/upload_img/‘,
                type:‘POST‘,
                data:formData,                                 //数据上传到后台
                prosessData:false,
                contentType:false,
                success:function (arg) {
                    console.log(arg)

                }

            })

        }
    </script>
</body>

6. 建立函数 upload_img

def upload_img(request):
    obj =  request.FILES.get(‘a1‘)
    print(obj)
    return HttpResponse(‘999‘)

7. 继续完善函数

def upload_img(request):
    obj =  request.FILES.get(‘a1‘)
    with open(obj.name,mode=‘wb‘) as f:
        for chunk in obj.chunks():
            f.write(chunk)
    return HttpResponse(‘999‘)

8.

  

时间: 2024-10-05 20:08:25

BBS功能之Ajax上传图片的相关文章

Python学习day14 BBS功能和聊天室

Created on 2017年5月15日 @author: louts 第1课 作业讲解及装饰器使用 28minutes def check(func): def rec(request,*args,**kargs): return func(request,*args,**kargs) return rec @checkdef index(request,): print request 第2课 自定义装饰器扩展使用 18minutes 第3课 第4课 BBS功能分析及介绍 37minute

C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中. 2.窗体代码添加 using System.Runtime.InteropServices;//和Html页面交互使用 在类的上一行添加 [ComVisible(true)]//和Html页面交互使用 在类的构造其中添加 this.webB.ObjectForScripting = this;

asp.net core 通过ajax上传图片及wangEditor图片上传

asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端代码如下: @Html.AntiForgeryToken() @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <div> <form id="uploadForm">

关于使用ajax上传图片问题

今天需要做一个上传图片的功能,由于框架里面没有带,上网搜了下.看到有spring mvc的图片上传,而且有例子,刚好是自己需要的,直接粘贴复制下.参考: http://blog.csdn.net/luckey_zh/article/details/46867957# 很简单,使用了commons-upload和commons-io包,配置文件位置后,页面form表单这几设置,然后就好了. 配置完后,自己运行却发现,上传报错了: org.apache.tomcat.util.http.fileup

移动端压缩并ajax上传图片解决方案

1.需求 做一个前端可压缩并且上传图片到后台的功能 2.使用组件 用到的主要是jq和LocalResizeIMG这2个库 3.使用方法 a.引入脚本文件 <script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> <script type='text/javascript' src='js/LocalResizeIMG.js'></script> <script type=

使用Ajax上传图片到服务器(不刷新页面)

有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这里还需要引用Jquery跟Jquery.form.js两个文件,没看到上传附件在哪里咯,需要的朋友可以给我留言哈 前台代码 Default2.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&

Ajax 上传图片并预览

1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>图片上传 | cookie</title> 6 </head> 7 <body

Ajax上传图片文件到服务器

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadByJs.aspx.cs" Inherits="WebApplication1.UI.FileUploadByJs" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xht

打造你自己ajax上传图片

今天,我们需要的图片上传插件,但是,互联网不提供符合他们的需要和易于使用的.所以我写了自己. 方法1,只使用jquery代码,.代码例如以下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> <