Fully own button "Select File"
Studying web programming, I did not find an intelligible solution to the problem of file uploading to the server with the help of one custom button.
I offer my bike to the community. I was inspired to write this text. Method â„–5 from the material We make a beautiful input [type = file] for an adaptive site ... And yes - everything works in IE, starting with version 9.
Dropbox demo:
')
Purpose : to create your own button / control by pressing which the file is loaded onto the server (or other file operations provided by the developer).
Tools : CSS, PHP, JavaScript.
Technologies used : Ajax, via hidden iframe.
To simplify the code, all procedures for checking the received file and try-catch function calls are deliberately discarded, since these points are not the topic of this article. Also does not cover the moment to prevent sound in IE. We use Ajax technology, which means that we have a main page that interacts with the user (front-end) and a script on the server that processes our requests (back-end)
1. On the main page, create a “form action”. We make it a target for a hidden frame, which we create statically (or dynamically). We create two “input” with the type “file” and “submit”, give them an “id”, put them in a “div”, which we hide from the page style. All these elements are not visible to the user and do not perceive any of his actions.
2. Starting "magic." For “input” with the type “file” to the change event, we hang the function call onchange = “LoadFile ();”.
3. On the main page create a button. We attach the function onclick = "FindFile ();" to the event of a mouse click on it.
4. In the FindFile () function, we simulate a click on “input” with the “file” type. That is, when you click on our button, the standard file selection dialog is called. As soon as the user selects a file, the onchange event is triggered and the LoadFile () function is called. In the LoadFile () function, we simulate a click on “input” with the type “submit”.
5. The form creates a POST request with the file name to our back-end script, which performs all security checks and file downloads. After this, the script calls the callback function of the main page, which reports the result of the execution.
Actually everything. For example, there are four main files, the code of which is given below:
css / style.css - homepage styles
view / upload.php - back-end file upload script
index.php - home page
js / upload.js - front-end homepage scripts
In addition, you need any file with a picture for buttons / openfile.png
Downloadable files are placed in the directory ../temp/
I offer my bike to the community. I was inspired to write this text. Method â„–5 from the material We make a beautiful input [type = file] for an adaptive site ... And yes - everything works in IE, starting with version 9.
Dropbox demo:
')
Purpose : to create your own button / control by pressing which the file is loaded onto the server (or other file operations provided by the developer).
Tools : CSS, PHP, JavaScript.
Technologies used : Ajax, via hidden iframe.
Preamble
To simplify the code, all procedures for checking the received file and try-catch function calls are deliberately discarded, since these points are not the topic of this article. Also does not cover the moment to prevent sound in IE. We use Ajax technology, which means that we have a main page that interacts with the user (front-end) and a script on the server that processes our requests (back-end)
Technology work
1. On the main page, create a “form action”. We make it a target for a hidden frame, which we create statically (or dynamically). We create two “input” with the type “file” and “submit”, give them an “id”, put them in a “div”, which we hide from the page style. All these elements are not visible to the user and do not perceive any of his actions.
2. Starting "magic." For “input” with the type “file” to the change event, we hang the function call onchange = “LoadFile ();”.
3. On the main page create a button. We attach the function onclick = "FindFile ();" to the event of a mouse click on it.
4. In the FindFile () function, we simulate a click on “input” with the “file” type. That is, when you click on our button, the standard file selection dialog is called. As soon as the user selects a file, the onchange event is triggered and the LoadFile () function is called. In the LoadFile () function, we simulate a click on “input” with the type “submit”.
5. The form creates a POST request with the file name to our back-end script, which performs all security checks and file downloads. After this, the script calls the callback function of the main page, which reports the result of the execution.
Actually everything. For example, there are four main files, the code of which is given below:
css / style.css - homepage styles
view / upload.php - back-end file upload script
index.php - home page
js / upload.js - front-end homepage scripts
In addition, you need any file with a picture for buttons / openfile.png
Downloadable files are placed in the directory ../temp/
Style sheet (css / style.css)
Create a button style and a hidden “input”.
.navButtons{ border:1px gray solid; position:absolute; overflow: hidden; display:block; height:50px; width:50px; margin:10px; -moz-box-shadow:5px 5px 7px rgba(3,33,33,.7); -webkit-box-shadow: 5px 5px 7px rgba(3,33,33,.7); box-shadow: 5px 5px 7px rgba(3,33,33,.7); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .navButtons:hover { border:2px solid black; background-color:#fff; } .hiddenInput{ position:absolute; overflow: hidden; display:block; height:0px; width:0px; } Input Script processing request for file upload (view / upload.php)
Here, everything is according to examples on the Internet, file validation is removed:
<?php // callback function jsOnResponse($obj) { echo '<script type="text/javascript"> window.parent.onResponse("'.$obj.'"); </script> '; } // $dir = '../temp/'; $name = basename($_FILES['loadfile']['name']); $file = $dir . $name; // $success = move_uploaded_file($_FILES['loadfile']['tmp_name'], $file); // callback jsOnResponse("{'filename':'" . $name . "', 'success':'" . $success . "'}"); ?> Home (index.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <title>OpenFile test</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" /> </head> <body> <!-- , --> <div class="navButtons" onclick="FindFile();" title=" "><img src="buttons/openfile.png" width=100% height=100%/></a></div> <!-- --> <form action="view/upload.php" target="rFrame" method="POST" enctype="multipart/form-data"> <!-- --> <div class="hiddenInput"> <input type="file" id="my_hidden_file" accept="image/jpeg,image/png,image/gif" name="loadfile" onchange="LoadFile();"> <input type="submit" id="my_hidden_load" style="display: none" value=''> </div></form> <!-- iframe --> <iframe id="rFrame" name="rFrame" style="display: none"> </iframe> <!-- --> <script src="js/upload.js"> </script> Javascript in main form (js / upload.js)
function FindFile() { document.getElementById('my_hidden_file').click(); } function LoadFile() { document.getElementById('my_hidden_load').click(); } function onResponse(d) // { eval('var obj = ' + d + ';'); if(obj.success!=1) { alert('!\n ' + obj.filename + " - "+obj.myres); return; }; alert(' '); } Source: https://habr.com/ru/post/245689/
All Articles