Use php to upload common files

The file upload function is a very common feature in the development process. you can upload files or portraits. different browser file uploads have different effects, next, I will share with you how to use php to complete common file upload functions. For more information, see File upload. now it is quite common. you can upload files and pictures, different browsers have different effects on "File upload ".

Let's take a look at the effect of Firefox:

There are many other browsers that will not view the results one by one. how can this Upload be implemented?

I. file upload function

(1) The first is to have this upload page.

The first step is to write the form elements (there is a processing page "about the upload processing, some rules can be written", there is a transmission mode, and then an important attribute, because it is a file upload, you must have this attribute: enctype = "multipart/form-data") and then the button. after the form is determined, it is the content in it, the type of the natural button for file upload is "file", and then the "upload" button. submit is required, so the button type must be "submit". the code is as follows:

First look at the effect:

Note: The information in this figure will be used below. in this case, I will first name an array so that it is not clear when we use it.

It is not difficult to see several two-dimensional arrays: including the file name, type, storage location, error information, and file size. in this way, the file will be temporarily saved on the server.

There are four notes when uploading files:

1. control the types of uploaded files

2. control the size of the uploaded file

3. prevent duplicate file names

3.1 modify the saved file name

3.11 username + timestamp + random number + file name

3.12 serial number

3.2 Use folders

3.21 public/lch/2017-2-12/1. jpg

4. Save the file

Once you know the four notes (or steps), you can start the write processing page step by step.

(1) in the output, we can see that not one item is an "error". First, we can determine whether the transmission is incorrect.

If ($ _ FILES ["file"] ["error"]) // upload the file value to the processing page and find the index with the error, that is, (array) error {echo $ _ FILES ["file"] ["error"];}

(2) If an error occurs, the error message is output. if there is no error, the following content is implemented: start writing according to the precautions.

First, control the type and size of the file during Upload (also from the (array) graph to find the type and size, and then assign them to the desired type value) we have limited the jpeg and png types, but there are also many types. you can simply write them with "or. Here we also use an if statement to determine (if the file type is jpeg or png and the file size is smaller than 1024000, the upload will fail)

If ($ _ FILES ["file"] ["type"] = "image/jpeg" | $ _ FILES ["file"] ["type"] =" image/png "& $ _ FILES [" file "] [" size "] <1024000) {
// Note 3 and 4
} The else {echo "file type is incorrect! ";}

(3) write files in comments (Note 3 and 4) of the code to avoid duplication and storage.

First, find the location where the file is saved (where you want to save it), and then splice it to modify the file name (using the timestamp)

$ Filesname = ". /files /". date ("YmdHis "). $ _ FILES ["file"] ["name"]; // $ _ FILES ["file"] ["name"] (array) graph name

Second: Determine whether the file exists (if it exists, it will prompt that it will be saved to the folder if it does not exist)

If (file_exists ($ filesname) // file_exists () method: determines whether a file exists. The value in it is the defined storage location {echo "file already exists "; // A prompt is displayed.} if else {// does not exist, save the file (move_uploaded_file () move_uploaded_file ($ _ FILES ["file"] ["tmp_name"], $ filesname); // The value must have the current storage location, where to save} note:
1. may be uploaded when the UTF-8 encoding format, Windows is the use of the national mark encoding format, upload the man may become garbled, you can save the file location plus "conversion encoding format"
The iconv () method contains three values: the current encoding format and the encoding format to be converted, the third is to convert the string $ filename = iconv ("UTF-8", "gb2312", $ filesname); // This iconv () contains 3 values, first, the current encoding format, second, the encoding format to be converted, and third, the string to be converted. if the upload format of the above file is tampered with, use the move_uploaded_file () method.

Now the upload of this file is complete. you can try it.

II. preview uploaded files

When uploading an image, you will first see how it works and then upload it. Next, the image preview function is available.

(1) you can have a file button to select a file.

// Add an event to this button

(2) A p used to display this image

Add a style for this p

#uploadPreview {  width: 168px;  height: 168px;              background-position: center center;  background-size: cover;  border: 4px solid #fff;  -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);  display: inline-block;
}

See the following results:

Then the event is written.

$ ("# UploadImage"). on ("change", function () {// get a reference file list var files = !! This. files? This. files: []; // returns if (! Files. length |! Window. fileReader) return; // only the selected file is an image if (/^ image /. test (files [0]. type) {// create a new FileReader instance var reader = new FileReader (); // read the local file as a DataURL reader. readAsDataURL (files [0]); // when loading, the image data is set as the p reader of the background. onloadend = function () {$ ("# uploadPreview" ).css ("background-image", "url (" + this. result + ")");}}});

This is just a simple Upload preview. the processing page uploaded to the file has not been written yet. in the next day, complete upload image code will be added.

View the effect of the selected image

In this way, the file upload and image preview are complete, and the two can be combined to upload the image. after that, I will continue to complete the content ~~~

For more articles about using php to complete common file upload functions, refer to PHP Chinese network!