如何在jquery中获取表单文件字段以上传图像

时间:2014-08-14 05:56:19

标签: php jquery ajax file-upload

我在html以下

This form allows you to upload a file to the server.<br>
        <div class="imguploadpath" style="width:100%;height:200px;background-color:#CCC;">
          <form name="myFormName" id ="myFormId" action="" method="post">
             <input type="file" name="img" id = "image_pe">
             <br/><br/><br/><br/>
             <input id="cmdSubmit" value="Submit" type="submit" class="">
          </form>
        </div>

我正在尝试使用以下脚本

获取文件字段值以在php中上传文件
jQuery( "#cmdSubmit" ).on( "click", function() {
   var file = jQuery('#image_pe').val(); 

//我必须将文件属性发送到jquery ajax中的php文件

 $.ajax({
            url: 'submit.php?files',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(data, textStatus, jqXHR)
            {
                if(typeof data.error === 'undefined')
                {
                    // Success so call function to process the form
                    submitForm(event, data);
                }
                else
                {
                    // Handle errors here
                    console.log('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
                // STOP LOADING SPINNER
            }
        });
       return false;

    });

var file只返回一些临时路径c://fakepath/image.jpg

如何在jquery和php上传,我需要在php文件中传递表单字段,我知道value() jquery函数是错误的。

这样做的正确方法是什么?

用于php文件上传我正在考虑使用这个脚本http://www.tizag.com/phpT/fileupload.php

2 个答案:

答案 0 :(得分:1)

试试这个: JQuery的:

var formdata = new FormData();
            jQuery.each($('#image_pe')[0].files, function(i, file) {
             formdata.append('image_pe', file);
            });


            $.ajax({
                url: "/my.php",
                data : formdata,
                dataType : "json",
                type : "post",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data){

                },
                failure: function(){
                    $(this).addClass("error");
                }
            });
            return false;

PHP代码:

$file = $_FILES['image_pe'];

答案 1 :(得分:0)

检查一下。这可能对你很有帮助

http://malsup.com/jquery/form/#file-upload