如何用js一键上传图片

因为不喜欢选择图片后,还要点击上传按钮才上传图片,就写了这个代码出来。主要功能就是选择图片后自动上传图片,不用再点击上传按钮。

首先在html填写:

<form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
      <input class="fileupload" ontouchstart="img();" ontouchend="img2();" type="file" name="file">
</form>

js代码为:

<script type="text/javascript">
    $(function () {
        $(".fileupload").change(function () {
            $("#myupload").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {//上传前
                    btn.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {//上传中
                    $("#loading").addClass("loading"); // 追加样式 
                    $("#load").addClass("load"); // 追加样式 
                },
                success: function (data) {//上传成功,data为upload.php返回的数据,根据自己的upload.php可修改此函数
                    var name=data.name;
                    var img = data.pic;
                    window.location.href = "image.php";
                    btn.html("开始测试");
                },
                error: function (xhr) {//上传失败
                    btn.html("上传失败");
                    files.html(xhr.responseText);
                }
            });
        });

    });
</script> 

这个一键上传页面用到了jq,使用前请先引入jq文件。因为代码用途不同,可能有部分代码在这里是多余,请自行删减,在代码关键点已做备注。

如有其它问题或意见请留言。

网友评论1

  1. 沙发
    小E在线:

    wp-cumulus 这个插件 如果有问题到时候博客留言交流

    2015-11-25 12:39 [回复]

发表评论

表情
还能输入210个字