在django中使用 jq上传文件

客官°小女子只卖身不卖艺 2022-02-13 08:21 255阅读 0赞

## 使用jq上传文件的demo ##

本文章是用jq在基于python3 Django2.1 实现的简单上传文件的功能  
第一次写文章，有哪里出问题了，请各位大佬多多教导！

**1.创建django项目**  
在pycharm 左上角File >New Project > Django >选择环境（只要安装有的话一般默认就行【my\_django\_project1】是本次项目的名字）>Create  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]  
**2.创建app**  
在底部打开pycharm 的命令行工具Terminal：输入**python [manage.py][] startapp mydemo2**  
**3.配置url**  
1.在mydemo2 [的app下创建urls.py][app_urls.py]，然后在my\_django\_project1的文件夹下导入这个urls.py  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]  
2.在mydemo2 [的app下的urls中配置url链接及在view.py][app_urls_url_view.py] 中配置处理请求的视图函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 3]  
3.在命令行工具Terminal 中输入：**python [manage.py][] runserver** 运行项目  
在浏览器中输入链接查看效果okok  
![在这里插入图片描述][20190427114204575.PNG]  
4.将view中的get的HttpResponse(“okoko”)换成render(request,‘mydemo2/index.html’,\{\})  
index.html 是我事先在bootstrap 官网上复制的模板，在浏览器中输入链接查看效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 5]  
**4.jq 上传文件**  
1.在index.html 中加入

当然要事先导入

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 6]  
2.func1 ajax上传文件的代码

function func1(){
             var file=$("#upfile")[0].files[0]
             var formData=new FormData()
             formData.append('upfile',file)
             $.ajax({
                 type:"post",
                 url:'upfile/',
                 data: formData,
                 processData: false,
                 contentType: false,
                 success:function (data) {
                     console.log(data)
                 },
                 error:function (xhr) {
                     console.log(xhr)
                 }
             })
         }

3.在mydemo2 [的urls.py][urls.py] 中添加

re_path(r'^upfile/$',mydemo2.My_handle.as_view(),name="upfile"),

4.在mydemo2 [中的view.py][view.py] 中

class My_handle(View):
        def get(self,request):
    
            return render(request,'mydemo2/index.html',{})
    
        def post(self,request):
            BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
            if request:
                file_object=request.FILES.get('upfile') #获取前端上传的文件
                print(file_object.name)
                #创建保存路径
                path=os.path.join(BASE_DIR,'mydemo2/db/{}'.format(file_object.name))
                path=path.replace('\\','/')
                if os.path.exists(path):
                    #如果文件存在 就不处理。。
                   return HttpResponse(" file already exists!")
                else:
                    f=open(path,'wb+')
                    #分段把文件写入到路径中
                    for chunk in file_object.chunk():
                        f.write(chunk)
                    f.close()
                    return HttpResponse("file save ok!!")

最后就能在mydemo2 下的db文件夹下看见上传的文件了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 7]

还有很多细节处理不好，下次再改进！！！  
仓库链接： [https://gitee.com/htg\_nice/my\_django\_demo19-4-3.git][https_gitee.com_htg_nice_my_django_demo19-4-3.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]: /images/20220213/f31b75f2a2dd4bd4ac9a09f07c32c499.png
[manage.py]: http://manage.py
[app_urls.py]: http://xn--appurls-qw3k351apr7azd8c.py
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]: /images/20220213/2d2d4e51609343b182e0f620c14f4917.png
[app_urls_url_view.py]: http://xn--appurlsurlview-xc7vuq910fl1nqz1dh4weea3231co5zfessa.py
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 2]: /images/20220213/69bccfc479fc48b0a45d0960a5243ac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 3]: /images/20220213/26d140f285b54e5f9d39f96d26c48f8e.png
[20190427114204575.PNG]: /images/20220213/1e4244ed2b8448b6b342c997426b7cb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 4]: /images/20220213/2a14bb998e834e00ab3c0bea19aba1cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 5]: /images/20220213/ad767f2aeba44ffd956c96f2058e839a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 6]: /images/20220213/f7d764baca5e40be974ee160697f01b3.png
[urls.py]: http://xn--urls-9k7j.py
[view.py]: http://xn--view-zf5fs05s.py
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 7]: /images/20220213/678602f09af9400ca90ebd45b800b898.png
[https_gitee.com_htg_nice_my_django_demo19-4-3.git]: https://gitee.com/htg_nice/my_django_demo19-4-3.git