js jquery input的type=file上传文件 选择后 触发事件[带PHP上传代码]

CDN jquery

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

jquery 选择后触发代码

//jquery
<script>
	$("#file1").change(function(e){
		var filec = $("#file1").get(0).files[0];
		if(filec){
			//文件已经选择好 下面可以写自己的上传代码了
		}
	})
</script>

//js 原生
<script>
	document.getElementById("input").addEventListener("change",function () {
		var filec = document.getElementById("file1").files[0];
		if(filec){
			//文件已经选择好 下面可以写自己的上传代码了
		}
	});
</script>

整合代码

<input type="file" id="file1"/>
</br></br><img src="" id="img" style="max-width: 220px;max-height: 220px;">
<input type="hidden" class="cimg" name="img" value=""/>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script>
	$("#file1").change(function(e){
		var sc = $("#file1").get(0).files[0];
		if(sc){
			upload_img();
		}
	})
    function upload_img() {
            var formData = new FormData();
            formData.append("file", document.getElementById("file1").files[0]);   
            $.ajax({
                url: "/upload_img.php",
                type: "POST",
                data: formData,
                dataType:"json",
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status === true) {
                        $(".cimg").val(data.img);
						$("#img").attr("src", data.img);
                    }else{
						alert(data.img);
                    }
                }
            });
        }
</script>

upload_img.php文件代码

<?php
//博客地址：https://blog.csdn.net/qq_21363853
//代码比较简陋 有技术的自行补全优化
//重复上传文件 只输出文件路径 不保存多个
define("img_chucun_file", "static/uploads");
/获取文件上传后缀
function get_extension($file)
{
    return substr($file, strrpos($file, '.') + 1);
}
function get_json($val, $status = false)
{
    $data = array("status" => $status, "img" => $val);
    return json_encode($data);
}
$upfile = $_FILES["file"];
if (is_uploaded_file($upfile['tmp_name'])) {
    if ($upfile["type"] == "image/gif" || $upfile["type"] == "image/jpeg" || $upfile["type"] == "image/png" || $upfile["type"] == "image/pjpeg") {
        $error = $upfile["error"];
        if ($error == 0) {
        } elseif ($error == 1) {
            echo get_json("超过了文件大小");
            exit;
        } elseif ($error == 2) {
            echo get_json("超过了文件大小");
            exit;
        } elseif ($error == 3) {
            echo get_json("文件只有部分被上传");
            exit;
        } elseif ($error == 4) {
            echo get_json("上传没有文件");
            exit;
        } else {
            echo get_json("上传文件大小为0");
            exit;
        }
		//重命名文件
        $file_name = md5(time().rand(9999999999999,999999999999999999999)) . "." . get_extension($upfile["name"]);
        if (!file_exists($_SERVER['DOCUMENT_ROOT'].'/'.img_chucun_file . "/")) {
            mkdir($_SERVER['DOCUMENT_ROOT'].'/'.img_chucun_file . "/");
        }
        if (move_uploaded_file($upfile["tmp_name"], $_SERVER['DOCUMENT_ROOT'].'/'.img_chucun_file . "/" . $file_name) !== false) {
				$file='/'.img_chucun_file . '/';
                $mulu = $_SERVER['DOCUMENT_ROOT'].$file;
                $filename2 = $mulu . $file_name;
                //重复上传文件 只输出文件路径 不保存多个
				$md5=md5(file_get_contents($filename2));
				$imgarr = getimagesize($filename2);
                $file_path = $md5 . "." . get_extension($upfile["name"]);
                rename($filename2, $mulu . $file_path);
                @chmod($mulu . $file_path, 0644);
                echo get_json("/" . img_chucun_file . "/" . $file_path, true);
        }
    } else {
        echo get_json("操作失败，请上传jpg,gif,png等格式的图片");
    }
}