ajax 文件上传文件名_创建基于Ajax的文件上传器

最新推荐文章于 2022-02-22 20:23:42 发布

cuketao5066

最新推荐文章于 2022-02-22 20:23:42 发布

阅读量151

点赞数

文章标签： css html jquery css3 js ViewUI

原文链接：https://www.script-tutorials.com/ajax-file-upload-methods/

版权

ajax 文件上传文件名

I got one interesting theme. How to upload files without refreshing whole page during submitting. Hope this will interesting to you. Lets check 2 methods – using ordinary iframes and external library. Also I will using jQuery in work too (I like it).

我有一个有趣的主题。如何在提交过程中上传文件而不刷新整个页面。希望这会令您感兴趣。让我们检查2种方法-使用普通的iframe和外部库。我也将在工作中使用jQuery(我喜欢它)。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code with both samples.

这是我们的两个示例的主页代码。

templates / main.html (templates/main.html)


<script src="js/jquery.min.js"></script>
<script src="js/ajaxupload.3.6.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.ui.accordion.css" type="text/css" />
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="examples">
    <div id="accordion" class="accordion">
        <h3><a href="#">Ajax file upload into (hidden) iframe</a></h3>
        <div class="sample_1">
            <form id="file_upload_form" method="post" enctype="multipart/form-data" action="index.php" target="upload_target">
                <input name="file" id="file" size="50" type="file" />
                <input type="submit" name="action" value="Upload" /><br />
                <input type="text" name="variable" value="extra values" />
                <input type="hidden" name="sample" value="1" />
            </form>
            <button onclick="$('#upload_target').slideToggle(500)" >show iframe</button>
            <iframe id="upload_target" name="upload_target" src=""></iframe>
            <div style="clear:both;"></div>
            <div id="response1">awaiting for upload</div>
            <div style="clear:both;"></div>
            <p>
                First example of ajax upload. Most easy one. Just choose any image and clock 'Upload' button to process. Also you can send visible or hidden extra information. In iframe I will draw result of work. Plus we have response behavior of upload result.
            </p>
        </div>
        <h3><a href="#">Ajax file upload using ajaxupload.3.6.js library</a></h3>
        <div class="sample_2">
            <div id="ajxiupload2">Upload button</div>
            <div id="response2">awaiting for upload</div>
            <div style="clear:both;"></div>
            <p>
                Another good sample. Now we will using special library - ajaxupload.3.6.js. This library from <a rel="nofollow" href="http://valums.com/ajax-upload/">here</a>. Both samples very interactive and useful. Try it!
            </p>
        </div>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/ajaxupload.3.6.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.ui.accordion.css" type="text/css" />
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="examples">
    <div id="accordion" class="accordion">
        <h3><a href="#">Ajax file upload into (hidden) iframe</a></h3>
        <div class="sample_1">
            <form id="file_upload_form" method="post" enctype="multipart/form-data" action="index.php" target="upload_target">
                <input name="file" id="file" size="50" type="file" />
                <input type="submit" name="action" value="Upload" /><br />
                <input type="text" name="variable" value="extra values" />
                <input type="hidden" name="sample" value="1" />
            </form>
            <button onclick="$('#upload_target').slideToggle(500)" >show iframe</button>
            <iframe id="upload_target" name="upload_target" src=""></iframe>
            <div style="clear:both;"></div>
            <div id="response1">awaiting for upload</div>
            <div style="clear:both;"></div>
            <p>
                First example of ajax upload. Most easy one. Just choose any image and clock 'Upload' button to process. Also you can send visible or hidden extra information. In iframe I will draw result of work. Plus we have response behavior of upload result.
            </p>
        </div>
        <h3><a href="#">Ajax file upload using ajaxupload.3.6.js library</a></h3>
        <div class="sample_2">
            <div id="ajxiupload2">Upload button</div>
            <div id="response2">awaiting for upload</div>
            <div style="clear:both;"></div>
            <p>
                Another good sample. Now we will using special library - ajaxupload.3.6.js. This library from <a rel="nofollow" href="http://valums.com/ajax-upload/">here</a>. Both samples very interactive and useful. Try it!
            </p>
        </div>
    </div>
</div>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

模板/css/main.css (templates/css/main.css)


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:570px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}
iframe#upload_target{width:500px;height:400px;border:1px solid #ddd;float:left;display:none}
#response1,#response2{font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}
#ajxiupload2{background-color:#afe;font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:570px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}
iframe#upload_target{width:500px;height:400px;border:1px solid #ddd;float:left;display:none}
#response1,#response2{font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}
#ajxiupload2{background-color:#afe;font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}

template / css / jquery.ui.accordion.css和templates / css / jquery.ui.theme.css (templates/css/jquery.ui.accordion.css and templates/css/jquery.ui.theme.css)

This is common files – styles of jquery elements. No need to give full code of that file here. It always available as a download package

这是常见文件-jquery元素的样式。无需在此处提供该文件的完整代码。它始终可以作为下载包获得

步骤3. JS (Step 3. JS)

Here are necessary JS file to our project.

这是我们项目所需的JS文件。

js / main.js (js/main.js)


$(document).ready(function(){
    $("#accordion").accordion({autoHeight: false,navigation: true});
    // for sample 1
    var $oResponse1 = $("#response1");
    $("#upload_target").load(
        function() {
        var ret = frames['upload_target'].document.getElementsByTagName("div")[0].innerHTML;
        var data = eval("("+ret+")"); //parse json
            $oResponse1.text(data.html);
        }
    );
    // for sample 2
    var $oResponse2 = $("#response2");
    var button = $('#ajxiupload2'), interval;
    new AjaxUpload(button,{
        action: 'index.php',
        data : {
            'extra_info' : 'some extra info',
            'sample' : 2,
        },
        name: 'image',
        onSubmit : function(file, ext){
            this.disable();
        },
        onComplete: function(file, response){
            this.enable();
            var data = eval("("+response+")"); //parse json
            $oResponse2.text(data.html);
        }
    });
});


$(document).ready(function(){
    $("#accordion").accordion({autoHeight: false,navigation: true});
    // for sample 1
    var $oResponse1 = $("#response1");
    $("#upload_target").load(
        function() {
        var ret = frames['upload_target'].document.getElementsByTagName("div")[0].innerHTML;
        var data = eval("("+ret+")"); //parse json
            $oResponse1.text(data.html);
        }
    );
    // for sample 2
    var $oResponse2 = $("#response2");
    var button = $('#ajxiupload2'), interval;
    new AjaxUpload(button,{
        action: 'index.php',
        data : {
            'extra_info' : 'some extra info',
            'sample' : 2,
        },
        name: 'image',
        onSubmit : function(file, ext){
            this.disable();
        },
        onComplete: function(file, response){
            this.enable();
            var data = eval("("+response+")"); //parse json
            $oResponse2.text(data.html);
        }
    });
});

js / ajaxupload.3.6.js，js / jquery.min.js，js / jquery.ui.accordion.js和js / jquery.ui.widget.js (js/ajaxupload.3.6.js, js/jquery.min.js, js/jquery.ui.accordion.js and js/jquery.ui.widget.js)

This is common files – jQuery library with addon and our new library. No need to give full code of that file here. It always available as a download package

这是常见文件–带有插件的jQuery库和我们的新库。无需在此处提供该文件的完整代码。它始终可以作为下载包获得

步骤4. PHP (Step 4. PHP)

Ok, here are all used PHP file:

好的，这都是用过PHP文件：

index.php (index.php)


<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ((int)$_POST['sample'] == 1) {
        echo '<div>' . json_encode(array(
            'html' => 'uploaded',
            'code' => 1,
        )) . '</div>';
        echo '<pre>';
        echo "\$_POST variables:\n";
        print_r($_POST);
        echo "\$_FILES variables:\n";
        print_r($_FILES);
        echo '</pre>';
        exit;
    }
    if ((int)$_POST['sample'] == 2) {
        echo json_encode(array(
            'html' => 'uploaded',
            'code' => 1,
        ));
        exit;
    }
}
require_once('templates/main.html');
?>


<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ((int)$_POST['sample'] == 1) {
        echo '<div>' . json_encode(array(
            'html' => 'uploaded',
            'code' => 1,
        )) . '</div>';
        echo '<pre>';
        echo "\$_POST variables:\n";
        print_r($_POST);
        echo "\$_FILES variables:\n";
        print_r($_FILES);
        echo '</pre>';
        exit;
    }
    if ((int)$_POST['sample'] == 2) {
        echo json_encode(array(
            'html' => 'uploaded',
            'code' => 1,
        ));
        exit;
    }
}
require_once('templates/main.html');
?>

现场演示

结论 (Conclusion)

Today I told you about ajaxy upload methods. Sure that you will happy play with it. You can use this material to create own scripts into your startups. Good luck!

今天我告诉您有关ajaxy上传方法的信息。确保您会喜欢它。您可以使用此材料在创业公司中创建自己的脚本。祝好运！