Posts o[php+js] submit a file w/ form
Post
Cancel

o[php+js] submit a file w/ form

reference http://www.w3schools.com/php/php_file_upload.asp browser compatibility problem - http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/ http://www.w3.org/TR/html-markup/input.file.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//index.html

	//custom filesize validation
	function checkSize(max_size) {
	    var input = document.getElementById("cvfile");

	    if(input.files && input.files.length == 1)  {           
	        if (input.files[0].size > max_size) {
	            alert("The file must be less than " + (max_size/1024/1024) + "MB");
	            return false;
	        }
	    }

	    return true;
	}

<form name="cv" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return checkSize(2097152)">

	<input id='dob' name='dob' type="date" min='1979-01-01' max='1996-01-01' class='form-control' placeholder='dob' required="" autofocus="">
	<input id='city' name='city' type="text" class='form-control' placeholder='city' required="">
	<input id='telephone' name='telephone' type='tel' class='form-control' placeholder='tel' required="">
	<input id='portofolio' name='portofolio' type='url' class='form-control' placeholder='portofolio url'>
	<input class='form-control' type="file" name="cvfile" id="cvfile" size="40" accept="application/pdf,application/msword, application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation,,application/vnd.openxmlformats-officedocument.wordprocessingml.document , text/plain, application/pdf, image/*" required="">

	<button id="btn" class="btn btn-primary btn-large" type="submit" name="submit">
		Submit
	</button>

</form>
1
2
//upload.php
<?php if="" (!isset($_post["dob"])="" ||="" !isset($_post["city"])="" ||="" !isset($_post["telephone"])="" ||="" !isset($_files["cvfile"])="" ||="" !isset($_post["portofolio"]))="" {="" die("error="" invalid="" input");="" }="" $target_dir="uploads/" ;="" $target_file="$target_dir" .="" basename($_files["cvfile"]["name"]);="" if="" (move_uploaded_file($_files["cvfile"]["tmp_name"],="" $target_file))="" {="" echo="" "the="" file="" ".="" basename(="" $_files["cvfile"]["name"]).="" "="" has="" been="" uploaded.";="" }="" else="" {="" echo="" "sorry,="" there="" was="" an="" error="" uploading="" your="" file.";="" }=""?>

when tried to serialize the form with jQuery, weird things happened, solution submit natural the form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//index.html

 	function submitform()
	{//when user press Check anchor
		//your custom code here, submit, without jQ help! Plain via form name! 
		document.cv.submit();
	}

    //custom filesize validation
    function checkSize(max_size) {
        var input = document.getElementById("cvfile");

        if(input.files && input.files.length == 1)  {
            if (input.files[0].size > max_size) {
                alert("The file must be less than " + (max_size/1024/1024) + "MB");
                return false;
            }
        }

        return true;
    }

<form name="cv" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return checkSize(2097152)">

    <input id='dob' name='dob' type="date" min='1979-01-01' max='1996-01-01' class='form-control' placeholder='dob' required="" autofocus="">
    <input id='city' name='city' type="text" class='form-control' placeholder='city' required="">
    <input id='telephone' name='telephone' type='tel' class='form-control' placeholder='tel' required="">
    <input id='portofolio' name='portofolio' type='url' class='form-control' placeholder='portofolio url'>
    <input class='form-control' type="file" name="cvfile" id="cvfile" size="40" accept="application/pdf,application/msword, application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation,,application/vnd.openxmlformats-officedocument.wordprocessingml.document , text/plain, application/pdf, image/*" required="">

[Check](javascript: submitform())

<!-- WARNING SHOULD NOT BE TYPE SUBMIT (OTHERWISE CONFLICT WITH THE JS CALL)
  		<button id="btn" class="btn btn-primary btn-large" type="submit" name="submit">
			Submit
		</button>-->

</form>

origin - http://www.pipiscrew.com/?p=2523 phpjs-submit-a-file-w-form

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags