如何在django中使用valums上传显示图像预览,并提交图像

时间:2011-10-17 12:54:30

标签: django jquery file-upload

我正在努力实现两件事。

  1. 显示用户选择的图像的预览。这基本上是为了让用户验证他确实上传了正确的图像。我将图像保存在临时位置。
  2. 填写其他一些数据并确认图像正确后。我想将此数据和图片发布到网址。
  3. 我正在使用Valum的ajax上传来上传文件并成功完成了图像预览。

    问题是如何提交整个数据:用户现在确定的图像以及其他一些数据(评论,电子邮件ID等)。

    我正在考虑的方法是使用上传到服务器的文件进行预览并将其保存在我的数据库中。但我这样做并不是很自在。有没有更好的方法来实现这一目标。

    提前致谢

    我的html的一小部分:

              <div id='file-uploader'></div>
              <img alt="Preview" class="previewImage" id='preview' height='50' width='50'/>
              <input type=text id="addLink" size="60"/>
              <textarea name="Name" rows="15" cols="50"></textarea>
              <input type="email" name="emailBox" size="60">
              <div id = 'testlink'></div>
              <input id="submitrequest" class="button" type="submit" value="Submit photo">  
    

    我的Javascript:

         uploader = new qq.FileUploader( {
                        action: "{% url ajax_upload %}",
                        multiple:false,
                        element: $('#file-uploader')[0],
                        onComplete: function( id, fileName, responseJSON ) {
                                 if( responseJSON.success )
                                   $('#preview').attr('src', responseJSON.url) ;
                                 else
                                   alert('failed') ;
                        },
            });
            $('#addLink').blur(function(){
                        linkTemplate = _.template("<a href='<%= link  %>' value = 'Go to Link' class = 'button'></a>");
                        linkval = $('#addLink').val();
                        if(linkval.startsWith('http://') == false)
                           linkval = 'http://' + linkval;
                        $('#testlink').append(linkTemplate({link:linkval}));
            });
    
            $('#addLink').focus(function(){
                        $('#testlink').empty();
            });
    

0 个答案:

没有答案