如何使用jQuery上传图片?

时间:2016-10-27 05:40:42

标签: php jquery

我附加了JS和index.php文件。此代码不适用于图像,但对于类型文本,它正常工作。我已经搜索了很多,但没有得到如何通过jQuery上传图像。

index.php文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title><?= TITLE . ' | ' . ucfirst($page); ?></title>
        <!-- Tell the brow form_groupser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <?php include('inc/css-inc.php'); ?>
    </head>
    <body>
        <div class="row form_group">
            <div for="inputName" class="col-sm-2 control-div">Image A. </div>
            <div class="col-sm-4">
                <input type="file" class="form-control" id="qimage" name="imga"  onchange="un(this.value)">
            </div>
            <button type="button" onClick="return savequestion()" id="savequestion" class="btn btn-info pull-right"><?= $act; ?></button><!--</form>-->
            <!-- jQuery 2.1.4 -->
            <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
            <!-- Bootstrap 3.3.5 -->
            <script src="bootstrap/js/bootstrap.min.js"></script>   
    </body>
</html>

Js文件

$('#savequestion').click(function () {
    var qimage1 = $('#qimage').prop('files')[0];
    var form_data = new FormData();
    form_data.append('qimage', qimage1);
    form_data.append('mod', mod);
    form_data.append('req', req);
    $.ajax({
        url: 'common_process.php',
        dataType: 'text',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });
});

1 个答案:

答案 0 :(得分:1)

试试这个:

HTML:

<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>

Jquery的:

$('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });

腓:

if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

这会将您的文件卸载到&#34;上传&#34;夹。并检查文件夹写入权限。