html5Drag-and-drop uploading of files is an old topic. There are many examples on the Internet. The code I originally found and modified was also found online, but I just stepped on a few. After the pit, I wanted to record the process.
The following mainly introduces the implementation of dragging files from outside the browser to the browser for uploading. First, some necessary basics will be introduced.
Drag events include the following:
dragstart: Fired when the user starts dragging theobject.
dragenter: Triggered when the mouse passes over the target element for the first time and dragging occurs. The listener for this event should indicate whether drop is allowed at this location, or the listener does not perform any operation, then drop is not allowed by default.
dragover: Triggered when the mouse passes over an element and drag occurs.
dragleave: Triggered when the mouse leaves an element and drag occurs.
drag: Triggered every time the mouse is moved when the object is dragged.
drop: This event is triggered on the element when a drop occurs at the end of the drag operation. The listener should be responsible for retrieving the dragged data and inserting it at the drop location.
dragend: Triggered when the mouse button is released while dragging the object.
When dragging files from outside the browser to the browser, the events that must be bound aredragoveranddrop, others can be left unbound.dragoveranddropEvent processingThe event## must be called within the function#preventDefault()function, otherwise the browser will perform default processing. For example, text-type files will be opened directly, and a download file box may pop up for non-text files.
event.dataTransferObtain.
dataTransfer.dropEffect [ = value ]: Returns the currently selected operation type. You can set a new value to modify the selected operation. Optional values are:none, copy, link, move.
dataTransfer.effectAllowed [ = value ]: Returns the allowed operation type, which can be modified. Optional values are:none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized.
dataTransfer.types: Returns a DOMString listing all formats set in the dragstart event. Also, if there are files being dragged, one of the type strings will be "Files".
dataTransfer.clearData( [ format ] ): Remove data in the specified format. If the argument is omitted all data is removed.
dataTransfer.setData(format, data): Add the specified data.
data = dataTransfer.getData(format): Return the specified data. If there is no such data, an empty string is returned.
dataTransfer.files: Returns the dragged FileList, if any.
dataTransfer.setDragImage(element, x, y): Use the specified element toupdate thedrag feedback, replacing the previously specified feedback ( feedback).
dataTransfer.addElement(element): Add the specified element to the element list used for rendering drag feedback.
In this use case, the most important thing isdataTransfer.filesAttribute, It is a list of files that the user drags into the browser. It is aFileListobject withlengthattributes. Accessible via subscript.
FormDatarepresents a form, which can be passedappend('fieldName', value)The function adds parameters to the form. The parameters can be not only strings, but also File objects or even binary data.
The new version of the XMLHttpRequest object. The XMLHttpRequest mentioned here refers to the new version.
XMLHttpRequest can issue HTTP requests to servers with different domain names. This is called "Cross-origin resource sharing" (Cross-originresourcesharing, referred to as CORS).
Browsers have a famous same-origin policy, which is the basis of browser security. In addition to browser support, CORS also requires server consent.
XMLHttpRequest supports sending FormData directly, just like the browser performs form submission.
XMLHttpRequest also supports progress information (progressevent). Progress is divided into upload progress and download progress. The upload progress event is inXMLHttpRequest.uploadobject, the download progress event is in theXMLHttpRequestobject. Each progress event has three properties:
lengthComputable: Computable number of bytes uploaded
total: Total number of bytes
loaded: Number of bytes uploaded so far
In addition to progress events, the following five events are also supported:
loadEvent: The transfer is completed successfully.
abortEvent: The transfer was canceled by the user.
#errorEvent: An error occurred during transmission.
loadstartEvent: Transfer starts.
loadendEvent: The transfer is completed, but it is not known whether it was successful or failed.
Same asprogressevent, theevent processingfunction belonging to the upload operation is bound toXMLHttpRequest.uploadOn the object, the attribute download is directly bound to theXMLHttpRequestobject.
When testing on this machine, be careful to change the path in the code below to your own.
The server side needs to write a Servlet to receive the uploaded form./html5/FileUploadServlet
It can be implemented quickly using the @MultipartConfig annotation of servlet3.
drag drop upload demo <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <p id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ p> </body> <script> var progressBarZone = document.getElementById('progressBarZone'); function sendFile(files) { if (!files || files.length < 1) { return; } var percent = document.createElement('p' ); progressBarZone.appendChild(percent); var formData = new FormData(); // 创建一个表单对象FormData formData.append( 'submit', '中文' ); // 往表单对象添加文本字段 var fileNames = '' ; for ( var i = 0; i < files.length; i++) { var file = files[i]; // file 对象有 name, size 属性 formData.append( 'file[' + i + ']' , file); // 往FormData对象添加File对象 fileNames += '《' + file.name + '》， ' ; } var xhr = new XMLHttpRequest(); xhr.upload.addEventListener( 'progress', function uploadProgress(evt) { // evt 有三个属性： // lengthComputable – 可计算的已上传字节数 // total – 总的字节数 // loaded – 到目前为止上传的字节数 if (evt.lengthComputable) { percent.innerHTML = fileNames + ' upload percent :' + Math.round((evt.loaded / evt.total) * 100) + '% ' ; } }, false); // false表示在事件冒泡阶段处理 xhr.upload.onload = function() { percent.innerHTML = fileNames + '上传完成。 ' ; }; xhr.upload.onerror = function(e) { percent.innerHTML = fileNames + ' 上传失败。 ' ; }; xhr.open( 'post', 'http://cross.site.com:8080/html5/FileUploadServlet' , true); xhr.send(formData); // 发送表单对象。 } document.addEventListener("dragover", function(e) { e.stopPropagation(); e.preventDefault(); // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。 }, false); document.addEventListener("drop", function(e) { e.stopPropagation(); e.preventDefault(); // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。 sendFile(e.dataTransfer.files); }, false); </script> </html></pre> <div class="contentsignin"> Copy after login </div> </div> <p style="font: 14px/25.2px Helvetica, Tahoma, Arial, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"></p> <p style="font: 14px/25.2px Helvetica, Tahoma, Arial, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">If the above codes are all deployed on the same website, there is no problem. But the upload operation I want to do is to transfer the file to another website, and a pitfall arises.</p> <p style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: 25.2px; font-family: Helvetica, Tahoma, Arial, sans-serif; margin: 0px; padding: 0px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-stretch: normal; background-color: rgb(255, 255, 255); text-size-adjust: auto; -webkit-text-stroke-width: 0px;"></p> <p>The above is the detailed content of Sample code sharing for html5 file drag and drop upload. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=html5，文件拖拽" target="_blank">html5，文件拖拽</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;"> source：php.cn </div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/faq/359032.html" title=""><span>Previous article：Detailed introduction to HTML5 File api to implement breakpoint resumption</span></a> <a href="//m.sbmmt.com/faq/359036.html" title=""><span>Next article：Detailed introduction to the implementation case of HTML5 simple online drawing tool</span></a> </div> <div class="wzconShengming"> <div class="bzsmdiv"> Statement of this Website </div> <div> The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn </div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle"> Latest Articles by Author </div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/377601.html">Video material on building your own PHP framework from scratch</a> </div> <div> 2023-03-15 16:54:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/377137.html">Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function</a> </div> <div> 2023-03-15 12:26:02 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/376186.html">Introduction to how to receive emails in IMAP in php</a> </div> <div> 2023-03-14 18:58:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/375194.html">Example of how to quickly implement array deduplication in PHP</a> </div> <div> 2023-03-14 11:30:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/369412.html">Summary of the use of all attributes of the</a> <a>tag in html</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/379971.html">Summary of basic knowledge of PHP (necessary for beginners to get started)</a> </div> <div> 2023-03-16 15:20:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/381607.html">Introduction to the use of typeof in JavaScript</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/382066.html">Introduction to the use of confirm() method in JavaScript</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/357705.html">A detailed introduction to the HTML5 Placeholder attribute</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/380149.html">How to implement single-select, multiple-select and reverse-select in forms in ReactJS</a> </div> <div> 1970-01-01 08:00:00 </div></li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle"> Latest Issues </div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172229.html" target="_blank" title="HTML5 video M3U8 encoded with Base64" class="wdcdcTitle">HTML5 video M3U8 encoded with Base64</a> <a href="//m.sbmmt.com/wenda/172229.html" class="wdcdcCons">I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it<!DO...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-09-09 23:07:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>247 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/171555.html" target="_blank" title="Unable to download file via HTML5's download attribute" class="wdcdcTitle">Unable to download file via HTML5's download attribute</a> <a href="//m.sbmmt.com/wenda/171555.html" class="wdcdcCons">I'm trying to create a download link the way I've been using it before. But now it keeps r...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-09-02 21:11:35</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>194 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/164675.html" target="_blank" title="Folder dragging demonstrated in phpstorm" class="wdcdcTitle">Folder dragging demonstrated in phpstorm</a> <a href="//m.sbmmt.com/wenda/164675.html" class="wdcdcCons">I saw in the video that after dragging phpstorm to change the folder, the namespace of the...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2020-02-14 01:42:24</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>1078 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/138598.html" target="_blank" title="html5 - z-index is valid in browser debugging but invalid in mobile phone testing" class="wdcdcTitle">html5 - z-index is valid in browser debugging but invalid in mobile phone testing</a> <a href="//m.sbmmt.com/wenda/138598.html" class="wdcdcCons">When debugging the browser, the arrow is hidden after a drag event occurs, but it is not e...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2017-07-04 13:45:06</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>2 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>1551 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/138425.html" target="_blank" title="html5 - How to read video files stored on the server in php language? I can't figure it out, please ask God for guidance." class="wdcdcTitle">html5 - How to read video files stored on the server in php language? I can't figure it out, please ask God for guidance.</a> <a href="//m.sbmmt.com/wenda/138425.html" class="wdcdcCons">How to read the video files stored on the server in PHP language? I don’t know how to impl...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2017-07-01 09:12:07</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>634 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt"> <div class="wzczt-title"> <div> Related Topics </div> <a href="//m.sbmmt.com/faq/zt" target="_blank">More></a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the production methods of html5 animation production?"></a><a target="_blank" href="//m.sbmmt.com/faq/html5dhzzynxz" class="title-a-spanl" title=""><span>What are the production methods of html5 animation production?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between HTML and HTML5"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlyhtmldeqb" class="title-a-spanl" title=""><span>The difference between HTML and HTML5</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/rbbqjyc"><img src="https://img.php.cn/upload/subject/202407/22/2024072213234776197.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Ripple future forecast"></a><a target="_blank" href="//m.sbmmt.com/faq/rbbqjyc" class="title-a-spanl" title=""><span>Ripple future forecast</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/uboundhs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213421734133.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ubound function usage"></a><a target="_blank" href="//m.sbmmt.com/faq/uboundhs" class="title-a-spanl" title=""><span>ubound function usage</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/azxtgs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214183767031.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Which company does Android system belong to?"></a><a target="_blank" href="//m.sbmmt.com/faq/azxtgs" class="title-a-spanl" title=""><span>Which company does Android system belong to?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/wdcgqdgzyl"><img src="https://img.php.cn/upload/subject/202407/22/2024072211500358410.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How the temperature sensor works"></a><a target="_blank" href="//m.sbmmt.com/faq/wdcgqdgzyl" class="title-a-spanl" title=""><span>How the temperature sensor works</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/httpqq415cw"><img src="https://img.php.cn/upload/subject/202407/22/2024072213480083690.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to solve http request 415 error"></a><a target="_blank" href="//m.sbmmt.com/faq/httpqq415cw" class="title-a-spanl" title=""><span>How to solve http request 415 error</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jarwjysmdkfs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214271738009.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to open jar files"></a><a target="_blank" href="//m.sbmmt.com/faq/jarwjysmdkfs" class="title-a-spanl" title=""><span>How to open jar files</span></a></li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle"> Popular Recommendations </div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="what is h5" href="//m.sbmmt.com/faq/414835.html">what is h5</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to create an h5 page if you don't understand code? Recommended H5 page production platform" href="//m.sbmmt.com/faq/417718.html">How to create an h5 page if you don't understand code? Recommended H5 page production platform</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What are the new features of html5" href="//m.sbmmt.com/faq/473125.html">What are the new features of html5</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What is h5 page production" href="//m.sbmmt.com/faq/468382.html">What is h5 page production</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What is the difference between h5 and mini program?" href="//m.sbmmt.com/faq/463311.html">What is the difference between h5 and mini program?</a> </div></li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div> Popular Tutorials </div> <a target="_blank" href="//m.sbmmt.com/course.html">More></a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one"> Related Tutorials <div></div> </div> <div class="tabdiv swiper-slide" data-id="two"> Popular Recommendations <div></div> </div> <div class="tabdiv swiper-slide" data-id="three"> Latest courses <div></div> </div> </div> <ul class="one"> <li><a target="_blank" href="//m.sbmmt.com/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div> 1394785 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/74.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"></a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div> 4206476 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div> 2347729 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"></a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div> 493083 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/2.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"></a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="//m.sbmmt.com/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div> 826235 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> <ul class="two" style="display: none;"> <li><a target="_blank" href="//m.sbmmt.com/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div> 1394785 times of learning </div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div> 2347729 times of learning </div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"></a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div> 493083 times of learning </div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"></a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div> 213403 times of learning </div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"></a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div> 842580 times of learning </div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> <ul class="three" style="display: none;"> <li><a target="_blank" href="//m.sbmmt.com/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"></a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div> 3102 times of learning </div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"></a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div> 2481 times of learning </div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"></a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div> 1973 times of learning </div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"></a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div> 464 times of learning </div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"></a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div> 10755 times of learning </div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> </div> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div> Latest Downloads </div> <a href="//m.sbmmt.com/xiazai">More></a> </div> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef"> Web Effects <div></div> </div> <div class="swiper-slide" data-id="twof"> Website Source Code <div></div> </div> <div class="swiper-slide" data-id="threef"> Website Materials <div></div> </div> <div class="swiper-slide" data-id="fourf"> Front End Template <div></div> </div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[form button] jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Player special effects] HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Menu navigation] HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[form button] jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Player special effects] VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[html5 special effects] Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Picture special effects] jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Photo album effects] CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div></li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" title="[Front-end template] Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" title="[Front-end template] Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" title="[Front-end template] Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" title="[Front-end template] Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" title="[Front-end template] Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" title="[Front-end template] IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" title="[Front-end template] Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div></li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="[PNG material] Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="[PNG material] Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="[PNG material] Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="[banner picture] Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div></li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="[Front-end template] Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="[Front-end template] Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="[Front-end template] Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="[Front-end template] Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="[Front-end template] Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="[Front-end template] IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="[Front-end template] Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div></li> </ul> </div> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> php.cn：Public welfare online PHP training，Help PHP learners grow quickly！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all"> </body> </html>
