使用 JQuery 和 Django 上传图像

2024-04-04

在继续阅读之前,请相信我,我已经阅读了有关此主题的所有其他帖子,但没有一个对您有帮助。

我正在尝试向我的网站添加图像上传功能。我想上传图片 通过 ajax 帖子。我无法让这个工作。

这是我所拥有的:

HTML - 我有一个特殊的设置,以便显示图像而不是愚蠢的按钮 和文本字段。当我选择图像后点击“确定”时,我还使用 onChange 事件自动提交。

<form id="add-picture-form" method="POST" action="/api/upload_image/" enctype="multipart/form-data">{% csrf_token %}  
    <div class="thumbnails" style="width:400px;">
        <label class="cabinet BrandHeader"> 
            <input type="file" class="file" id="upload-photo" onChange="$('#add-picture-form').submit();" /> 
        </label> 
    </div>
</form> 

Jquery:

$('#add-picture-form').submit(function() { 
    //var filename = $("#upload-photo").val();
    var photo = document.getElementById("upload-photo"); 
    var file  = photo.files[0];

$.ajax({ 
    type: "POST",
    url: "/api/upload_image/",
    enctype: 'multipart/form-data',
    data: {'file': file.getAsBinary(), 'fname' : file.fileName },
    success: function(){
       alert( "Data Uploaded: ");
    }
});

    return false;   
}); 

最后,当您发布到 /api/upload_image/ 时,我的 django 视图会被点击

def ajax_upload( request ):

    print request.POST
    print request.FILES

    return http.HttpResponse(simplejson.dumps([True]), mimetype='application/javascript')

我尝试将图像写入二进制文件,但无法打开已写入的数据。 为什么使用 javascript 上传图像如此困难?我是个白痴,只是不使用简单的解决方案?如果是这样,请告诉我在 Django 中使用 jQuery 上传图像的最佳方法是什么。


尝试 jQuery 插件上传 http://www.uploadify.com/ or SWF上传 http://code.google.com/p/swfupload/。有人甚至为你完成了 Django 集成,请参阅:https://github.com/tstone/django-uploadify https://github.com/tstone/django-uploadify and http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/ http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JQuery 和 Django 上传图像 的相关文章

随机推荐

  • Django 开发服务器 CPU 密集型 - 如何分析?

    我注意到本地 windows7 机器上的 django 开发服务器 版本 1 1 1 正在使用大量 CPU 根据任务管理器的 python exe 条目 约为 30 即使处于空闲状态 即没有请求到来进 出 是否有一种既定的方法来分析可能造成
  • Magento 图片上传表单字段

    我跟着这个链接 http www magentocommerce com wiki 5 modules and development admin how to create pdf upload in backend for own mo
  • SQL Server 更新触发器,仅获取修改的字段

    我知道COLUMNS UPDATED 好吧 我需要一些快速的捷径 如果有人做了 我已经在做了 但如果有人可以节省我的时间 我会感激的 我基本上需要一个仅包含更新的列值的 XML 我需要它用于复制目的 SELECT FROM Insert 为
  • Jenkins 未识别 Maven

    我在Windows 8上安装了Tomcat 7 上面部署了Jenkins 我在 Jenkin 设置中配置了 JDK Ant 和 Maven 在 Maven 部分 我将名称命名为 LocalMaven 将 MAVEN HOME 命名为C Te
  • Postgres 正则表达式 负向前瞻

    场景 匹配除字符串 J01FA09 之外的任何以 J01 开头的字符串 我很困惑为什么以下代码不返回任何内容 SELECT 1 WHERE J01 FA09 J01FA10 当我能看到regexr com https regex101 co
  • fft 和小波

    我可以使用 fft 获取加载的 1 秒音频文件的频率 相位和幅度 并重新创建它 我现在想做的是找出每个频率在 1 秒音频文件中的开始位置和结束位置 并将数据放入数组中 示例 100hz 从 0 23 秒到 0 34 秒开始 104 34hz
  • 如何修复双编码 UTF8 字符(在 utf-8 表中)

    以前的一个LOAD DATA INFILE运行时假设 CSV 文件是latin1 编码 在此导入过程中 多字节字符被解释为两个单字符 然后 再次 使用 utf 8 进行编码 这种双重编码产生了异常 例如 代替 如何纠正这些字符串 以下 My
  • 在电子中创建多个预加载文件(每页一个)

    我正在创建我的第一个 Electron 应用程序 并且完成了表单的第一页 现在这个应用程序不是 SPA 所以我有大约 3 4 个不同的页面 并且页面通向另一个页面 为了允许正确的代码组织 我想为每个面向客户端的页面保留一个单独的预加载文件
  • 如何设置 NHibernate 事务的超时

    我需要在单个事务中完成大量数据库处理 包括使用 NHibernate 的一些处理 为了使所有内容在同一个事务中工作 我使用 NHibernate 的 Session 来启动它 并在其中登记其他工作的命令 一切都很顺利 直到我承诺为止 那时我
  • 停止无限循环中的delphi程序

    当 Delphi 中发生无限循环时 当我按下停止按钮时 调试器甚至不会给我堆栈跟踪 如果我怀疑程序在哪里停止 我可以放置一个断点 如果这是正确的无限循环 它将停止 下面是一个故意造成无限循环的示例程序 procedure TForm1 bt
  • Android 中的最大 BackStack 大小

    我是android开发的新手 我需要知道最大内存大小 of 后台堆栈 in android我想知道有多少活动 of 安卓应用 can be 存储在 BackStack 中 Thanks 后台堆栈的最大内存大小与设备上的可用内存量相同 您可以
  • 有 F#(或 C#)中的 R 树实现吗? [复制]

    这个问题在这里已经有答案了 可能的重复 是否有任何记录在案的 NET 的免费 R Tree 实现 https stackoverflow com questions 2041834 is there any documented free
  • 多行组并使用正则表达式进行搜索

    好的 正则表达式向导 我希望能够搜索我的日志文件并找到其中包含 错误 一词的任何会话 然后返回整个会话日志条目 我知道我可以使用字符串 数组来做到这一点 但我想学习如何使用正则表达式来做到这一点 但这就是问题 如果我决定使用正则表达式来做到
  • DataTables 固定标题与宽表中的列未对齐

    Problem 当使用sScrollX sScrollXInner and or sScrollY为了实现内部内容滚动的固定标题表格 在 Chrome 和 IE 中 表格的标题与正文的其余部分不对齐 另一方面 Firefox 可以完美地显示
  • 为什么堆比二叉树更好地表示优先级队列?

    在 最大 堆中 很容易找到最大的项目O 1 时间 但要真正删除它 你需要复杂性O log n 因此 如果从堆中插入和删除都是O log n 用堆来表示优先级队列比二叉树有什么优点 堆使用较少的内存 它们可以作为数组实现 因此没有存储指针的开
  • OpenFileDialog 切断预先填充的文件名[重复]

    这个问题在这里已经有答案了 我使用以下命令来显示 打开文件 对话框 OpenFileDialog fdlg new OpenFileDialog fdlg FileName Properties Settings Default Last
  • 如何使用 webpack 填充 Promise?

    我正在使用 webpack 来捆绑我的 JavaScript 我依赖于类似的模块popsicle https www npmjs com package popsicle哪个使用任何承诺 https www npmjs com packag
  • [ngModel] 和 (ngModelChange) 如何协同工作?

    我是 Angular 的新手 正在学习 Angular 6 我了解 ngModel 但当我尝试 ngModelChange 时 出现了一些问题 我有一个 html 元素 超文本标记语言
  • 在 heroku 上以沙箱模式运行 Rails 控制台

    在文档中找不到它 在SO上也找不到它 但是有没有办法在heroku Celadon Cedar 上以沙盒模式运行Rails 3 2 x 控制台 相当于 rails console sandbox 对于更 Heroku 方式 的替代方案 he
  • 使用 JQuery 和 Django 上传图像

    在继续阅读之前 请相信我 我已经阅读了有关此主题的所有其他帖子 但没有一个对您有帮助 我正在尝试向我的网站添加图像上传功能 我想上传图片 通过 ajax 帖子 我无法让这个工作 这是我所拥有的 HTML 我有一个特殊的设置 以便显示图像而不