views.py

def upload_img(request):
    nid=str(uuid.uuid4())
    ret={'status':True,'data':None,'message':None}
    obj=request.FILES.get('k3')
    file_path=os.path.join('static',nid+obj.name)
    f=open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret['data']=file_path
    return HttpResponse(json.dumps(ret))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>

<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="file" name="k3" onchange="uploadFile();" />
    </form>
    <h3>预览</h3>
    <div id="preview">
    </div>
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>

function uploadFile() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);

var tag = document.createElement('img');
            tag.src = obj.data;
            $('#preview').empty().append(tag);
        }
    </script>
</body>
</html>

ajax之---上传图片和预览的更多相关文章

  1. React+ajax+java 上传图片并预览

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图 ...

  2. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  3. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  4. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  5. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  6. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  7. html5 ajax多图片可预览上传图片

    最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...

  8. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  9. nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

随机推荐

  1. Goland 生成可执行文件

    Goland通过调用go build 生成可执行文件. 默认Goland是可以执行程序,但你找不到可执行文件. 你需要自定义配置文件. 创建go build配置文件 Run kind 选Directo ...

  2. Linux系统中有趣的命令（可以玩小游戏）

    Linux系统中有趣的命令(可以玩小游戏) 前言 最近,我在看一些关于Linux系统的内容,这里面的内容是真的越学越枯燥,果然学习的过程还是不容易的.记得前几个月初学Linux时,有时候就会碰到小彩蛋 ...

  3. SpringBoot集成Junit

    1.在pom.xml下添加Junit依赖: <!--添加junit环境的jar包--> <dependency> <groupId>org.springframew ...

  4. linux下使用vim创建编辑文件

    vi/vim 使用实例 如果要想用vim/vi创建一个文件(使用命令): vim test.txt   不管文件存在与否 直接输入 vi 文件名 就能够进入 vi 的一般模式 按下 i 进入输入模式( ...

  5. Nginx进程模型

    多进程模式 在开始介绍Nginx的进程模型之前先说明下:Nginx也支持Single Master单进程模式,但是这个模式效率较低,一般只用在开发环境.所以不是本文介绍的重点. Nginx默认采用多进 ...

  6. 基于Java的二叉树的三种遍历方式的递归与非递归实现

    二叉树的遍历方式包括前序遍历.中序遍历和后序遍历,其实现方式包括递归实现和非递归实现. 前序遍历:根节点 | 左子树 | 右子树 中序遍历:左子树 | 根节点 | 右子树 后序遍历:左子树 | 右子树 ...

  7. HTTP基础--请求

    请求,由客户端向服务器端发出,可以分为4部分:请求方法(Request Method),请求的网址(Request URL),请求头(Request Headers),请求体(Request Body ...

  8. .Net 单元测试框架xUnit使用

    使用前需要导入下面的NuGet包:(不然可能会导致测试代码无法运行) .net版本 .net core3.1 Moq这个包只有需要Mock的时候才需要导入(不清楚Mock的话可以留言或自行百度) 开始 ...

  9. 拾色器，可以取出电脑屏幕的任何颜色，ui以及程序员前端等常用软件，文件很小，300K

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 今天给大家介绍一个小软件,挺实用的,叫做拾色器. 用途:取出电脑屏幕的任意颜色,当你 ...

  10. Android开发之将Edittext输入弹出的软键盘设置搜索确定键。详细代码，已验证可用。

    1,首先在布局中添加 android:imeOptions="actionSearch 2,然后java代码中设置代码: et_input_password.setOnEditorActio ...