ifram+form方式实现文件、图片上传、预览

1、前端代码

<!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="k1" onchange="uploadFile();" />
    </form>
    <h3>预览</h3>
    <div id="preview">
    </div>
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>
         //文件上传控件绑定onchange事件,当有文件上传就触发表单提交
        function uploadFile() {
            document.getElementById(‘iframe1‘).onload = reloadIframe1;
            document.getElementById(‘fm1‘).submit();
        }

        //取得iframe控件的返回值,并将值取出进行json反序列化,
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);

            //创建img控件,并将远端的图片地址赋予image。
            var tag = document.createElement(‘img‘);
            tag.src = obj.data;
            $(‘#preview‘).empty().append(tag);
        }
    </script>
</body>
</html>   

2、后端代码

def upload_img(request):
    ret={‘status‘:True,‘data‘:None}
    obj = request.FILES.get(‘k1‘)
    print(obj)
    file_path = os.path.join(‘static‘,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))
时间: 2024-11-08 22:04:31

ifram+form方式实现文件、图片上传、预览的相关文章

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д`)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

图片上传-预览

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript实现图片上传本地预览图片的代码-php自学网</title> <script type="text/javascript"> function checkFiles(str, ex

移动端 js 实现图片上传 预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /

来之不易的js图片上传预览代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS