Question

我有这样的HTML。

<div id="cb">
    <span>
       <br>
       "test.jpg"
    </span>
    <br>
    <img src="datat:image/jpeg;base64/9ikdsaasdflaljkf" class ="0">
</div>

我试图在没有表单提交的情况下点击按钮上传文件。我正在按照教程说明

var file = $("#cb")[0].files[0];

但这条线我没有任何价值。有谁能够帮我。

Answer 1

你的代码就像这样

v5.10.0 built for x86_64-linux-thread-multi

  $('#btn-upload').click(function() {
   var file = $("#cb")[0].files[0].name;
   console.log(file);
  });

Answer 2

试试这个：

$(document).ready(function(){
    $('#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 */
    });
});
</script>
</head>

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

upload.php的

<?php
    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";
        }
    }

?>

Answer 3

文件控件最初没有文件，因此显示为空。您可以在点击上传后获取，以便在浏览文件

后在上传按钮点击事件中获取文件

$('#btn-upload').click(function(){

 var file = $("#cb")[0].files[0];
 alert(file); // Shows [object File] i.e. file object

 var fileName = $("#cb")[0].files[0].name; // Gives filename

});

Answer 4

您可以使用Cloudinary的jQuery文件上传插件，使用此解决方案，您可以直接从浏览器上传图像。

从GitHub项目的js文件夹和HTML页面下载jquery.cloudinary.js，包括jQuery库后包含jquery.cloudinary.js。

<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>

也从GitHub项目的js文件夹下载以下文件。

jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js

并在HTML页面中包含所有必需的jQuery文件：

<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>

您可以在此处找到更多信息。 http://cloudinary.com/documentation/jquery_integration

图像上传jquery没有形式

4 个答案: