是否可以使用js插件上传文件而无需重定向页面?

时间:2013-07-01 23:27:08

标签: javascript

任何人都可以告诉我任何方式我可以上传图像文件而无需刷新整个页面吗?可能是dojo或任何JQuery插件...... 我试过了

$.ajax({
         url: "myurl.php",
         data: $("#form").serialize(),
         type:"POST",
         success:function(){
                     alert("uploaded"); 
                 } 
      }); 

并在表单中包含:<form> <input type="file" name="p_photo"> </form>

问题是jquery ajax不使用enctype="multipart/fom-data"

谢谢你的回应是当之无愧的!

1 个答案:

答案 0 :(得分:2)

为简单起见,也许只需使用jQuery文件上传插件:

http://blueimp.github.io/jQuery-File-Upload/

文档和示例位于上面的链接中。以下是该网站对此插件的描述,该插件将完全按照您的要求进行操作:

  

带有多个文件选择的文件上传小部件,拖放&amp;放弃支持,   进度条,验证和预览图像,音频和视频   jQuery的。支持跨域,分块和可恢复文件上传和   客户端图像大小调整。适用于任何服务器端平台(PHP,   Python,Ruby on Rails,Java,Node.js,Go等)支持标准   HTML表单文件上传。

以下是使用此插件的“基本”版本的示例实现:

<input id="fileupload" type="file" name="files[]" data-url="path/upload.php" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

此示例要求服务器为每个上传的文件提供JSON响应,一旦文件在服务器上,您就可以使用此代码段(在PHP中)提供:

   <?php
         echo json_encode(array(array(
            'name' => $image->filename,
            'type' => $file->getType(),
            'size' => '$file->getSize(),
            'url' => $file->getUrl()
        )));
    ?>