上传图片或者文件

以后绝对会用到  使用ajax上传文件或者图片

urls:

from django.contrib import admin
from django.urls import path

from one import views

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    path(‘upload_img/‘,views.upload_img), #上传图片
    path(‘form_data_upload/‘,views.form_data_upload),
    path(‘upload_file/‘,views.upload_file),  #上传文件
    path(‘iframe_upload_img/‘,views.iframe_upload_img),
    path(‘upload_iframe/‘, views.upload_iframe),
]

urls

views:

from django.shortcuts import render,redirect,HttpResponse

import os
import uuid
def upload_img(request):
    ‘‘‘
    上传图片
    :param request:
    :return:
    ‘‘‘
    if request.method == "GET":
        return render(request,‘upload_img.html‘)
    user = request.POST.get(‘user‘)
    avatar = request.POST.get(‘avatar‘)
    print(user,avatar)
    return HttpResponse(‘上传成功‘)

def form_data_upload(request):
    """
    ajax上传文件
    :param request:
    :return:
    """
    img_upload = request.FILES.get(‘img_upload‘)

    file_name = str(uuid.uuid4()) + "." + img_upload.name.rsplit(‘.‘, maxsplit=1)[1]    #取到你的 按照.分割后的  后缀名  就是后面的jpg或者png
    img_file_path = os.path.join(‘static‘, ‘imgs‘, file_name)   #让你的这个图片存储在这里 进行地址拼接
    with open(img_file_path, ‘wb‘) as f:
        for line in img_upload.chunks():   #chunks 是按照块来循环的这样和按照和的没有区别
            f.write(line)

    return HttpResponse(img_file_path)    # 把你的地址返回出去 然后进行你的地址的接收

def upload_file(request):
    ‘‘‘
    上传文件
    :param request:
    :return:
    ‘‘‘
    if request.method == "GET":
        return render(request,‘upload_file.html‘)

    user = request.POST.get(‘user‘)
    avatar = request.FILES.get(‘avatar‘)
    with open(avatar.name,‘wb‘) as f:
        for line in avatar.chunks():
            f.write(line)
    return HttpResponse(‘上传成功‘)

USER_LIST = []

def iframe_upload_img(request):
    ‘‘‘
    这是iframe
    :param request:
    :return:
    ‘‘‘
    if request.method == "GET":
        return render(request,‘iframe_upload_img.html‘)
    user = request.POST.get(‘user‘)
    pwd = request.POST.get(‘pwd‘)
    avatar = request.POST.get(‘avatar‘)
    USER_LIST.append(
        {
            ‘user‘:user,
            ‘pwd‘:pwd,
            ‘avatar‘:avatar
        }
    )
    return redirect(‘/index/‘)

def upload_iframe(request):
    ‘‘‘
    你的伪造的ajax   ifram和form的组成的访问
    :param request:
    :return:
    ‘‘‘
    ret = {‘status‘:True,‘data‘:None}
    try:
        avatar = request.FILES.get(‘avatar‘)
        file_name = str(uuid.uuid4()) + "." + avatar.name.rsplit(‘.‘, maxsplit=1)[1]
        img_file_path = os.path.join(‘static‘, ‘imgs‘, file_name)
        with open(img_file_path, ‘wb‘) as f:
            for line in avatar.chunks():
                f.write(line)
        ret[‘data‘] = os.path.join("/",img_file_path)
    except Exception as e:
        ret[‘status‘] = False
        ret[‘error‘] = ‘上传失败‘
    return HttpResponse(json.dumps(ret))
    # return JsonResponse(ret)

views

templates:

第一种上传文件或者图片：  这种的兼容性差  使用于一般的互联网公司仅仅支持谷歌这些浏览器

运用currentTarget获取你上传改变的input内的内容进行抓取改变的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
       <div style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;">
            <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
                <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                <span>点击上传文件</span>
            </div>
            <input name="customer_excel" type="file" id="excelFile"
                   style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #333333;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
        </div>
        <div>
            <input type="text" name="user">
            <input type="submit" value="提交">
        </div>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $(function () {
        $(‘#excelFile‘).change(function (e) {
            console.log(e);
            var fileName = e.currentTarget.files[0].name;   {# currentTaget 是获取你的改变的标签的属性的事件  就是你的改变后的 这个标签内的名字#}
            {##}
            $(this).prev().find(‘span‘).text(fileName);
        })
    })
</script>
</body>
</html>

第一种上传文件

第二种运用ajax来上传：兼容性也不好

运用：FormData，图片预览

{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>Title</title>#}
{#</head>#}
{#<body>#}
{#就相当于你在你的图片上前面覆盖了一个内容  但是你的点击的提交让它隐藏你看着是点击了图片其实还是点击了这个input标签#}
{#<div style = "height : 100px;width:100px; padding:2px; border:2px solid #dddddd; position:relative;" >#}
{#    <img   style= "height:100%;width: 100%;border:0; ovreflow:hidden; border-radius:50%;" id="previewImg" src="" >#}
{#    <input style= "top:0; left:0; right:0; bottom:0 ; opacity:0 ; position:absolute; z-index:102" id="avatarImg" name="avatar_img" type="file" class="img_file">#}
{#</div>#}
{##}
{#<div>点击更换图片(<a href="#">撤销</a>)</div>#}
{##}
{##}
{#<form method="post" enctype="multipart/form-data">#}
{##}
{#    {% csrf_token %}#}
{##}
{##}
{#    <div>#}
{#        <input type="text" name="avatar" id="avatar">#}
{#        <input type="text" name="user">#}
{#        <input type="submit" value="提交">#}
{##}
{##}
{#    </div>#}
{##}
{##}
{#</form>#}
{#<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>#}
{##}
{#    <script>#}
{#        $(function(){#}
{#            bindChangAvatar3();#}
{#        });#}
{##}
{#        function bindChangAvatar3(){#}
{#            $(‘#avatarImg‘).change(function(){#}
            {#    当你的图片改变的时候就执行这个#}
{#                var file_obj =  $(this)[0].files[0];#}
            {#    当你的jquery的操作的时候你取到下标为0的就是js的对象#}
{#                var form = new FormData();{#   生成一个formdata对象因为formdata是你在用ajax传递文件的时候必须要带着的  不然无法上传 #}
{##}
            {#    #}
{##}
{#                form.append(‘img_upload‘,file_obj);     {# 把file_objzhge对象添加进去 然后起个名字叫img_upload   #}
{##}
{#                $.ajax({#}
{#                    url:‘/form_data_upload/‘,#}
{#                    type:‘post‘,#}
{#                    data:form,#}
{##}
{#                    processData:false,#}
{#                    contentType:false,  {#    这两个是告诉django不要给你的传递的字符串转化 格式#}
{#                    success:function(arg){#}
{#                        console.log(arg);#}
{#                        $(‘#previewImg‘).attr(‘src‘,‘/‘+arg);#}
{#                        $(‘#avatar‘).val(‘/‘+arg)#}
{##}
{##}
{#                    }#}
{#                })#}
{#            })#}
{#        }#}
{##}
{#    </script>#}
{##}
{##}
{#</body>#}
{#</html>#}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
{#    设置你的 这个模块进行的父相子绝让你的input隐藏 并且让你点击的都是input#}
    <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;"
         id="previewImg"
         src="">
    <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" id="avatarImg"
           name="avatar_img" type="file" class="img-file"/>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div>
        <input type="text" name="avatar" id="avatar">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(function () {
            bindChangeAvatar3();
        });

        function bindChangeAvatar3() {
            $(‘#avatarImg‘).change(function () {
                var file_obj = $(this)[0].files[0];
                {#当你的jquery按照下标为0取到的都是js的对象#}
                var form = new FormData();
                {#FormData是对你的传递的文件的时候必须要使用的#}
                form.append(‘img_upload‘, file_obj);
                $.ajax({
                    url: ‘/form_data_upload/‘,
                    type:‘POST‘,
                    data: form,
                    processData: false,  // tell jQuery not to process the data
                    {#告诉你的django你传递的字符串不要进行加工了 直接就是字符串样式的  因为django会对你的字符串进行加工#}
                    contentType: false,  // tell jQuery not to set contentType
                    success: function (arg) {
                        // 给img标签设置src属性，预览
                        console.log(arg);
                        $(‘#previewImg‘).attr(‘src‘,"/"+arg);
                        {#把你得到的样式进行放到img所要显示的样式#}
                        $(‘#avatar‘).val("/"+arg);
                    }
                })
            })
        }
    </script>
</body>
</html>

第二种 img

第三种：

伪造ajax iframe加上from来实现

iframe（兼容性最好）

1. iframe标签
可以修改src，且页面不刷新
2. form表单
提交表单数据，但刷新数据

这种的兼容性最好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <iframe style="display: none;" id="ifr" name="fffff"></iframe>
{#         运用你的iframe和from来实现一个伪ajax的操作  然后就能实现不刷新界面并且上传了#}
            <form method="POST" action="/upload_iframe/" enctype="multipart/form-data" target="fffff">
{#                想要是先这个伪造ajax的功能就必须要在form中设置一个target和#}
                {% csrf_token %}
                <img style="height: 100px;width: 100px;border: 0;overflow: hidden;border-radius: 50%;" id="prevImg"
                     src="/static/imgs/default.png">
                <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;"
                       id="avatar"
                       name="avatar" type="file" class="img-file"/>
            </form>
        </div>

     <form method="post" action="/iframe_upload_img/">
         {% csrf_token %}
         <input type="text" name="avatar" id="formAvatar" style="display: none">
         <input type="text" name="user" placeholder="请输入用户名">
         <input type="text" name="pwd" placeholder="请输入密码">
         <input type="submit" value="提交">
     </form>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(function () {
            bindChangeAvatar4();
        });

         function bindChangeAvatar4() {
            $(‘#avatar‘).change(function () {
                $(this).parent().submit();
                $(‘#ifr‘)[0].onload = function (){
                    var iframeContents = $(‘#ifr‘)[0].contentWindow.document.body.innerText;
                    iframeContents = JSON.parse(iframeContents);
                    if (iframeContents.status) {
                        $(‘#prevImg‘).attr(‘src‘, iframeContents.data);
                        $(‘#formAvatar‘).val(iframeContents.data);
                    }
                }

            })
        }

    </script>
</body>
</html>

伪造ajax

原文地址：https://www.cnblogs.com/askzyl/p/9332838.html

时间： 2024-11-06 18:23:59

上传图片或者文件的相关文章

C# WinForm 上传图片，文件到服务器的方法Uploader.ashx

网上有很多方案,起初用时,因为对asp.net不太了解,觉得FTP实现不错,可是后来发现,如果机器在域控下,就会有问题. 一年过去了,asp.net也熟悉了,知道ajax没事应该用ashx,验证码也用ashx,当然这里要说的WinForm上传也应该是ashx了吧,哈哈,先提供简单思路: 接收文件的asp.net是:Uploader.ashx,相关代码: view plaincopy to clipboardprint? <%@ WebHandler Language="C#" C

解决selenium自动化上传图片或文件出现windows窗口问题

在实际工作中,会经常遇到上传图片或文件的操作,有的是input标签的,有的是非input标签属性的.他们都有一个共同的特性会出现windows的弹出窗. 下面说下出现windows的弹出窗后怎么解决:总共2个步骤 1,首先点击打开,待出现选择文件的弹出窗后: 2,调用我下面这个函数: 提示:调用此方法需要在打开windows上传文件的系统窗口后再调用 (该方法适用于谷歌驱动) '''实现非input标签上传文件,调用此方法需要打开windows上传文件的系统窗口再调用''' import win

关于Asp.Net Mvc3.0 使用KindEditor4.0 上传图片与文件

http://blog.csdn.net/fyxq14hao/article/details/7245502 今天我们的Asp.Net Mvc 3的项目中,把KindEditor3.9改为 KindEditor4.0 .修改了js文件的引用后,发现还是无法上传图片,最后发现时图片上传中的参数名修改了  从imageUploadJson 改为了uploadJson. <script type="text/javascript">var editor;var options =

Ueditor 1.4.3 单独调用上传图片,或文件功能

第一步, 引入文件 <script src="ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script> <script src="ueditor/ueditor.all.min.js" type="text/javascript" charset="utf-8"&g

在.net MVC中异步上传图片或者文件

今天用到了MVC异步上传图片,找了半天写下来以后方便查找异步提交图片需要一个MyAjaxForm.cs             地址http://pan.baidu.com/s/1i3lA693 密码txgp 前台代码 @using (Ajax.BeginForm("AddMessages", "MenuInfo", new AjaxOptions { HttpMethod = "post", OnSuccess = "Successd

android使用wcf接收上传图片视频文件

一.Android 权限配置文件: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.niewei.updatefile" android:versionCode="1" android:versio

python测试开发django-47.xadmin上传图片和文件

前言 xadmin上传图片和上传文件功能 models模块设计 先设计一个model,用ImageField存放图片,FileField放文件,upload_to参数是存放的目录 # models.py from django.db import models from django.utils import timezone # Create your models here. class FileImage(models.Model): '''上传文件和图片''' title = model

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu

Retrofit2 上传图片等文件

普通写法: //创建表单的普通字段public static RequestBody createFormBody(String content) { RequestBody body = RequestBody.create(MediaType.parse("multipart/form-data"), content); return body; } //创建Multipart, fieldName为表单字段名 public static MultipartBody.Part cr