duanqian2368
2014-06-01 07:57
浏览 40

通过ajax和jquery从另一个php文件上传后显示图像

When the page is loaded, the image specified in src is displayed.When a user clicks on the form to upload the image,everything works fine except the image on the page does not change. It is because when the user clicks on the form to upload the image, he is directed to php file 2 but from there there is no request to change the image in php file 1. How can I achieve this (using ajax and jquery)?

图片转代码服务由CSDN问答提供 功能建议

加载页面时,会显示src中指定的图像。当用户点击表格上传时 图像,一切正常,但页面上的图像不会改变。 这是因为当用户点击表格上传图像时,他被定向到php文件2但是从那里没有请求更改图像 php文件1.如何实现这一点(使用ajax和jquery)?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dqwp81696 2014-06-01 12:36
    已采纳

    Try this code. This is the core.

    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#imgInp').on('change', function() {
                readPath(this);
                });
                });
    
                function readPath(input) {
                if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
              $('#blah').attr('src', e.target.result);
                }
              reader.readAsDataURL(input.files[0]);
                    }
                }
            </script>
        </head>
        <body>
    <form id="form1">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" width="500px" height="200px" alt="your image" />
    </form>
    
        </body> 
    </html>
    
    已采纳该答案
    打赏 评论
  • donglian1523 2014-06-01 17:09

    Here is another code snippet. Check your conditions in the server part and don't forget provide the locations correctly in server side and image src.

    HTML Part

    <!doctype html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <style>
    form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
    #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
    #bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
    #percent { position:absolute; display:inline-block; top:3px; left:48%; }
    </style>
    </head>
    <body>
    <h1>Ajax File Upload Demo</h1>
     <img id="blah" src="#" width="500px" height="200px" alt="your image" />
    <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
         <input type="file" size="60" name="myfile">
         <input type="submit" value="Ajax File Upload">
     </form>
    
     <div id="progress">
            <div id="bar"></div>
            <div id="percent">0%</div >
    </div>
    <br/>
    
    <div id="message"></div>
    
    <script>
    $(document).ready(function()
    {
    
        var options = { 
        beforeSend: function() 
        {
            $("#progress").show();
            //clear everything
            $("#bar").width('0%');
            $("#message").html("");
            $("#percent").html("0%");
        },
        uploadProgress: function(event, position, total, percentComplete) 
        {
            $("#bar").width(percentComplete+'%');
            $("#percent").html(percentComplete+'%');
    
        },
        success: function() 
        {
            $("#bar").width('100%');
            $("#percent").html('100%');
    
        },
        complete: function(response) 
        {
            $("#blah").attr("src",response.responseText);
        },
        error: function()
        {
            $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
    
        }
    
    }; 
    
         $("#myForm").ajaxForm(options);
    
    });
    
    </script>
    </body>
    
    </html>
    

    Upload.php

    <?php
    //upload.php
    $output_dir = "C:/wamp/www/";
    
    if(isset($_FILES["myfile"]))
    {
        //Filter the file types , if you want.
        if ($_FILES["myfile"]["error"] > 0)
        {
          echo "Error: " . $_FILES["file"]["error"] . "<br>";
        }
        else
        {
            //move the uploaded file to uploads folder;
            move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
    
         echo $_FILES["myfile"]["name"];
        }
    
    }
    ?>
    
    打赏 评论

相关推荐 更多相似问题