我可以使用jquery ajax和php上传文件,需要一些说明和修改

悄悄地

我已经读过了。

https://developer.mozilla.org/en/docs/Web/API/FormData

仍然不明白为什么formdata(frm)在代码中为空。console.log(frm);返回“ FormData {}”为空。为什么?

file_form.php =>

<title>Upload File</title>
<div id="targetLayer">No Image</div>
<img id="my_image1" src="" />
<img id="my_image2" src="" />

<form id="uploadForm1" enctype="multipart/form-data">
    <input name="image1" type="file" />
    <input type="submit" value="Submit" />
</form>

<form id="uploadForm2" enctype="multipart/form-data">
    <input name="image2" type="file" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script type="text/javascript">

    $(document).ready(function (e) {
        $("#uploadForm1").on('submit', (function (e) {
            frm = new FormData($(this)[0]);
            console.log(frm);
            e.preventDefault();
            $.ajax({
                url: "upload_script1.php",
                type: "POST",
                data: frm,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    var JsonObject = JSON.parse(response);
                    $("#targetLayer").html(response);

                    var fl1 = "uploads/" + JsonObject.image1;
                    $("#my_image1").attr("src", fl1).height(100).width(100);
                }
            });
        }));

        $("#uploadForm2").on('submit', (function (e) {
            frm = new FormData($(this)[0]);
            e.preventDefault();
            $.ajax({
                url: "upload_script2.php",
                type: "POST",
                data: frm,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    var JsonObject = JSON.parse(response);
                    $("#targetLayer").html(response);

                    var fl2 = "uploads/" + JsonObject.image2;
                    $("#my_image2").attr("src", fl2).height(100).width(100);
                }
            });
        }));


    });
</script>

upload_script1.php =>

<?php
    $uploaddir = '/var/www/html/file-upload/uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image1']['name']);
    move_uploaded_file($_FILES['image1']['tmp_name'], $uploadfile);

    $image1 = $_FILES['image1']['name'];
    $images["image1"] = $image1;
    echo json_encode($images);
?>

upload_script2.php =>

<?php
    $uploaddir = '/var/www/html/file-upload/uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image2']['name']);
    move_uploaded_file($_FILES['image2']['tmp_name'], $uploadfile);
    $image2 = $_FILES['image2']['name'];
    $images["image2"] = $image2;
    echo json_encode($images);
?>
  1. 任何人都可以将两个$.ajax()代码重写为一个$.ajax()代码,从而使代码更短吗?必要时重新编写html和php代码。

任何帮助将不胜感激。提前致谢。

阿卢克

我只修改了javascript部分。

我的例子是

<title>Upload File</title>
<div id="targetLayer">No Image</div>
<img id="my_image1" src=""/>
<img id="my_image2" src=""/>

<form id="uploadForm1" enctype="multipart/form-data">
    <input name="image1" type="file" />
    <input type="submit" value="Submit" />
</form>

<form id="uploadForm2" enctype="multipart/form-data">
    <input name="image2" type="file" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script type="text/javascript">

function fetch( type ) {

    var typeMap = {
        form1: { formId: 'uploadForm1', url: 'upload_script1.php', flKey: 'image1', imgId: 'my_image1' },
        form2: { formId: 'uploadForm2', url: 'upload_script2.php', flKey: 'image2', imgId: 'my_image2' }
    };

    var info = typeMap[ type ];
    if( ! info ) return console.error('no type: ' + type );

    $("#"+info.formId).on('submit',(function(e) {

        frm = new FormData($(this)[0]);
        console.log(frm);
        e.preventDefault();
        $.ajax({
            url: info.url,
            type: "POST",
            data:  frm,
            contentType: false,
            cache: false,
            processData:false,
            success: function(response){                
                var JsonObject = JSON.parse(response);              
                $("#targetLayer").html(response);

                var fl = "uploads/" + JsonObject[ info.flKey ];
                $("#"+info.imgId).attr("src",fl).height(100).width(100);
            }           
       });
    }));
}

$(document).ready(function (e) {    
    fetch( 'form1' );
    fetch( 'form2' );
});

</script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我可以使用jQuery Ajax在IE9中上传文件吗?

来自分类Dev

我需要一些JS和Jquery支持

来自分类Dev

我们可以使用和运算符来组合多个jQuery事件吗

来自分类Dev

我可以使用Greasemonkey和jQuery在页面中放置适当的笑脸或图像吗?

来自分类Dev

我可以使用带空格和一些特殊字符的i18n键名吗?

来自分类Dev

我需要一些有关静态和媒体文件的建议

来自分类Dev

我需要一些有关静态和媒体文件的建议

来自分类Dev

我需要从文件中解析一些文本和整数

来自分类Dev

是否可以使用JQuery拖放和上传图像?

来自分类Dev

我可以使用summernote html代码传递给jQuery ajax调用

来自分类Dev

我可以使用 Ionic 发出 Ajax JQuery POST 请求吗?

来自分类Dev

我们可以使用jquery向上一级节点吗?

来自分类Dev

我可以使用jquery .each()计算表单中的每一行吗?

来自分类Dev

MongoDB脚本和CSV文件:我可以使用require.js加载jquery.csv吗?

来自分类Dev

我有一些pod文件和一个makefile,我需要生成PDF,该怎么做?

来自分类Dev

使用Ajax和php上传文件

来自分类Dev

我可以使用JavaScript通过URL从远程文件中插入一些纯文本吗?

来自分类Dev

我可以使用一些 spring 批处理编写器写入单行 txt 文件吗?

来自分类Dev

我可以使用Excel公式来计算一些连续行的总和吗?

来自分类Dev

我可以使用一些参数引用命名子例程吗?

来自分类Dev

我可以使用Promise.all同时从Firestore中获取一些文档吗?

来自分类Dev

我可以使用wifi获得有关速度的一些建议吗?

来自分类Dev

如果我有一些符号警告,可以使用windbg分析的结果吗?

来自分类Dev

我可以使用RestKit和Realm.io吗?

来自分类Dev

我可以使用@switch和Enumerations吗?

来自分类Dev

jekyll和sass; 我可以使用元吗?

来自分类Dev

我可以使用 Flexbox 创建背景和前景吗?

来自分类Dev

我可以使用通配符附加和订阅频道吗?

来自分类Dev

我可以使用 Bootstrap 开发 PWA 和 React

Related 相关文章

  1. 1

    我可以使用jQuery Ajax在IE9中上传文件吗?

  2. 2

    我需要一些JS和Jquery支持

  3. 3

    我们可以使用和运算符来组合多个jQuery事件吗

  4. 4

    我可以使用Greasemonkey和jQuery在页面中放置适当的笑脸或图像吗?

  5. 5

    我可以使用带空格和一些特殊字符的i18n键名吗?

  6. 6

    我需要一些有关静态和媒体文件的建议

  7. 7

    我需要一些有关静态和媒体文件的建议

  8. 8

    我需要从文件中解析一些文本和整数

  9. 9

    是否可以使用JQuery拖放和上传图像?

  10. 10

    我可以使用summernote html代码传递给jQuery ajax调用

  11. 11

    我可以使用 Ionic 发出 Ajax JQuery POST 请求吗?

  12. 12

    我们可以使用jquery向上一级节点吗?

  13. 13

    我可以使用jquery .each()计算表单中的每一行吗?

  14. 14

    MongoDB脚本和CSV文件:我可以使用require.js加载jquery.csv吗?

  15. 15

    我有一些pod文件和一个makefile,我需要生成PDF,该怎么做?

  16. 16

    使用Ajax和php上传文件

  17. 17

    我可以使用JavaScript通过URL从远程文件中插入一些纯文本吗?

  18. 18

    我可以使用一些 spring 批处理编写器写入单行 txt 文件吗?

  19. 19

    我可以使用Excel公式来计算一些连续行的总和吗?

  20. 20

    我可以使用一些参数引用命名子例程吗?

  21. 21

    我可以使用Promise.all同时从Firestore中获取一些文档吗?

  22. 22

    我可以使用wifi获得有关速度的一些建议吗?

  23. 23

    如果我有一些符号警告,可以使用windbg分析的结果吗?

  24. 24

    我可以使用RestKit和Realm.io吗?

  25. 25

    我可以使用@switch和Enumerations吗?

  26. 26

    jekyll和sass; 我可以使用元吗?

  27. 27

    我可以使用 Flexbox 创建背景和前景吗?

  28. 28

    我可以使用通配符附加和订阅频道吗?

  29. 29

    我可以使用 Bootstrap 开发 PWA 和 React

热门标签

归档